我想减慢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() 函数。因为评估“实时”代码比直接在脚本中包含代码要慢。

Answer 2

我已经使用 jquery 动画实现了您的要求。请检查下面的 sn-p，如果您有任何疑问，请告诉我。

$('#btns').click(function(){
 
 	var $wrapper = $('<div />').addClass('wrap');
    
    $('img').wrap($wrapper);
    $('img').css('opacity', 1);
  
    $('img').parent().animate({
      height: '100px'
     },
     {
      duration: 2500, //you can change it according to your need of speed
     
      step: function(al) 
      {
         $('#status').html(al + "%");
         $('#progressBar').val(al);
         al++;
     
         if (al == 100) 
         {
           $('#status').html("100%");
           $('#progressBar').val(100);
         }
      },
      complete: function() 
      {
        $('#finalMessage').html("Process is complete");
      }
    });
 
 });
 

img{
  opacity:0;
}

.wrap {
  position:relative;
  height:0;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress id="progressBar" value="0" max="100" style="width:400px;"></progress>
   <span id="status"></span>
   <h1 id="finalMessage"><h1>
   <button id="btns">Scan</button> <!-- onclick="start(0)"  -->
   <img src="http://www.textileexpressfabrics.co.uk/WebRoot/BT4/Shops/BT3246/56F4/0B49/3BC3/A909/78CC/0A0C/0596/9596/tex_ex_1058_Plush_Velour_pink.jpg" />