JavaScript - 單擊按鈕加載進度條后顯示圖像

Question

我正在嘗試構建一個簡單的應用程序，該應用程序將在加載虛擬進度條后顯示隨機圖像。

我設法分別創建虛擬進度條和隨機圖像生成器。 現在我想一起 function 但我不知道該怎么做......我是這個順便說一句的新手。

隨機圖像代碼

 <body> <div> <button id="jsstyle" onclick="display_random_image();">Show Image</button> </div> <script> function display_random_image() { var theImages = [{ src: "Image", width: "240", height: "160" }, { src: "Image", width: "320", height: "195" }, { src: "Image", width: "500", height: "343" }]; var preBuffer = []; for (var i = 0, j = theImages.length; i < j; i++) { preBuffer[i] = new Image(); preBuffer[i].src = theImages[i].src; preBuffer[i].width = theImages[i].width; preBuffer[i].height = theImages[i].height; } // create random image number function getRandomInt(min,max) { // return Math.floor(Math.random() * (max - min + 1)) + min; imn = Math.floor(Math.random() * (max - min + 1)) + min; return preBuffer[imn]; } // 0 is first image, preBuffer.length - 1) is last image var newImage = getRandomInt(0, preBuffer.length - 1); // remove the previous images var images = document.getElementsByTagName('img'); var l = images.length; for (var p = 0; p < l; p++) { images[0].parentNode.removeChild(images[0]); } // display the image document.body.appendChild(newImage); } </script> </body>

假進度條

 <:DOCTYPE html> <html> <style> #myProgress { width; 100%: background-color; #ddd: } #myBar { width; 1%: height; 30px: background-color; #4CAF50; } </style> <body> <h1>JavaScript Progress Bar</h1> <div id="myProgress"> <div id="myBar"></div> </div> <br> <button onclick="move()">Click Me</button> <script> var i = 0; function move() { if (i == 0) { i = 1. var elem = document;getElementById("myBar"); var width = 1, var id = setInterval(frame; 10); function frame() { if (width >= 100) { clearInterval(id); i = 0; } else { width++. elem.style;width = width + "%"; } } } } </script> </body> </html>

誰能幫我解決我的問題？

Answer 1

嘗試以下粗略的嘗試。

HTML：

<!-- Button starts the progress bar animation -->
<p><button onclick="move()">Start</button></p>

<div id="myProgress">
    <div id="myBar"></div>
</div>

CSS（無變化）：

#myProgress {
    width: 100%;
    background-color: #ddd;
}

#myBar {
    width: 1%;
    height: 30px;
    background-color: #4CAF50;
}

JavaScript：

var preBuffer = [];

// create random image number
function getRandomInt(min, max) 
{
  var imgIndex = Math.floor(Math.random() * (max - min + 1)) + min;
  return preBuffer[imgIndex];
}

function displayRandomImage() 
{
    var theImages = [{
        src: "https://picsum.photos/id/237/240/160",
        width: "240",
        height: "160"
    }, {
        src: "https://picsum.photos/id/137/320/195",
        width: "320",
        height: "195"
    }, {
        src: "https://picsum.photos/id/37/500/343",
        width: "500",
        height: "343"
    }];
    
    for (var i = 0, j = theImages.length; i < j; i++) {
        preBuffer[i] = new Image();
        preBuffer[i].src = theImages[i].src;
        preBuffer[i].width = theImages[i].width;
        preBuffer[i].height = theImages[i].height;
    }

    var newImage = getRandomInt(0, preBuffer.length - 1);

    // remove the previous images
    var images = document.getElementsByTagName('img');
    var l = images.length;
    for (var p = 0; p < l; p++) {
        images[0].parentNode.removeChild(images[0]);
    }

    // display the image  
    document.body.appendChild(newImage);
}

var i = 0;

function move() {
  if (i == 0) {
    i = 1;
    var myProgress = document.getElementById('myProgress');
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
        
        // Pay attention here!!!
        // Firstly hide the progress bar
        myProgress.style.display = "none";
        
        // Then run the image displaying
        displayRandomImage();
        
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

JavaScript - 單擊按鈕加載進度條后顯示圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2020-08-13 05:45:28

JavaScript - 單擊按鈕加載進度條后顯示圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2020-08-13 05:45:28

解決方案1
0 已采納 2020-08-13 05:45:28