我想放慢html中进程栏的速度

I want to slowdown speed of process bar in html

本文关键字：进程 速度 html      更新时间：2023-09-26

第一个问题-我试图放慢进程栏的速度。我希望它需要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>

第二个问题-随着加载，我想要一些图像是根据我的进度条缓慢向下滑动。当这个过程完成后，整个图像就会显示在下一页。

事实上，我正试图创建一个小网站来了解更多信息，因为我在这个网站上是这个领域的新手，我正在尝试处理一张图像，处理完新的扫描图像后，将显示到下一页。帮我改正错误。

试试这个（你的代码中有一些语法错误）：

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

我已经使用jquery动画实现了您的需求。请检查下面的片段，如果您发现任何疑问，请告诉我。

$('#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" />

相关文章：