javascript - 我想降低 html 中进程栏的速度

Question

第一个问题-我正在尝试减慢我的进程栏的速度。我希望它需要 1 分钟才能完成加载。这是我的代码:JS

  function start(al) {
     var bar = document.getElementById('progressBar');
     var status = document.getElementById('status');
     status.innerHTML = al + "%";
     bar.value = al;
     al++;
     var sim = setTimeout("start(" + al + ")", 1);
     if (al == 100) {
     status.innerHTML = "100%";
     bar.value = 100;
     clearTimeout(sim);
     var finalMessage = document.getElementById('finalMessage');
     finalMessage.innerHTML = "Process is complete";
   }

HTML代码:

   <progress id="progressBar" value="0" max="100" style="width:400px;"></progress>
   <span id="status"></span>
   <h1 id="finalMessage"></h1>
   <button onclick="start(0)">Scan</button>

第二个问题 - 加载时我希望一些图像根据我的进度条缓慢下滑。当过程完成时，整个图像会显示在下一页上。

实际上，我正在尝试创建一个小型网站，以了解更多该领域的新信息，在该网站上，我正在尝试处理图像，处理后新的扫描图像将显示到下一页。帮助我改正我的错误。

Answer 1

试试这个(你的代码中有一些语法错误):

 function start(al) {
     var bar = document.getElementById('progressBar');
     var status = document.getElementById('status');
     status.innerHTML = al + "%";
     bar.value = al;
     al++;
     
     //var sim = setTimeout("start(" + al + ")", 10000);
     
     var sim = setTimeout(function() {
     
         start(al);
     }, 100); // 100 milliseconds
     
     if (al == 100) {
       status.innerHTML = "100%";
       bar.value = 100;
       clearTimeout(sim);
       var finalMessage = document.getElementById('finalMessage');
       finalMessage.innerHTML = "Process is complete";
     }
 }

 <progress id="progressBar" value="0" max="100" style="width:400px;"></progress>
 <span id="status"></span>
 <h1 id="finalMessage"></h1>
 <button onclick="start(0)">Scan</button>

尽量避免将数据作为字符串传递给 setTimeout() 函数。改为传递匿名函数。看起来像是在使用 eval() 函数。因为评估“实时”代码比直接在脚本中使用代码要慢。