使用javascript减少progressbar而不是增加

我还不太擅长javascript。。。但是我需要编辑这段代码，使showsecs中的值变为递减而不是递增。例如，倒计时计时器。我想我知道问题出在哪里，但我不知道如何使它正常工作。感谢您的帮助

containerWidth = 485;     
intervalDuration = 250;   

drawBar=0;

function progressBar(duration) { 
    resetStart();                                                                                                           
    ref=new Date();  start=ref.getTime();                                                                                       
    increment = intervalDuration*containerWidth/duration;                                                                       
    barWidth = interval*increment;                                                                                              
    drawBar = setInterval('progress('+duration%intervalDuration+')', intervalDuration);                                         
}

function progress(lastms) {
    document.getElementById('bar').style.width=barWidth;                                                                        
    document.getElementById('showsecs').innerHTML=Math.floor(interval*intervalDuration/1000);                               
    interval++;                                                                                                             
    if(interval*increment > containerWidth) {                                                                               
        clearInterval(drawBar);                                                                                             
        end=new Date(); end=lastms+end.getTime();                                                                           
        setTimeout("document.getElementById('bar').style.width=containerWidth",lastms);                                     
        setTimeout("document.getElementById('showsecs').innerHTML="+(lastms+intervalDuration*(interval-1))/1000, lastms);   
        setTimeout('window.open("timeout.html");');                                                                         
        }
        else barWidth = interval*increment;                                                                                 
    }

    function resetStart() {                                                                                                     
         if(drawBar) clearInterval(drawBar);                                                                                    
         document.getElementById('bar').style.width = 0;                                                                        
         document.getElementById('showsecs').innerHTML = 0;                                                                     
         interval = 1;                                                                                                          
}

---

更改应该相当简单：必须从结束间隔=持续时间和减量间隔-开始

修改代码：

containerWidth = 485;     
intervalDuration = 250;   

drawBar=0;

function progressBar(duration) { 
    resetStart(duration);                                                                                                           
    ref=new Date();  start=ref.getTime();                                                                                       
    increment = intervalDuration*containerWidth/duration;                                                                       
    barWidth = interval*increment;                                                                                              
    drawBar = setInterval('progress('+duration%intervalDuration+')', intervalDuration);                                         
}

function progress(lastms) {
    document.getElementById('bar').style.width=barWidth;                                                                        
    document.getElementById('showsecs').innerHTML=Math.floor(interval*intervalDuration/1000);                               
    interval--;                                                                                                             
    if(interval*increment > containerWidth) {                                                                               
        clearInterval(drawBar);                                                                                             
        end=new Date(); end=lastms+end.getTime();                                                                           
        setTimeout("document.getElementById('bar').style.width=containerWidth",lastms);                                     
        setTimeout("document.getElementById('showsecs').innerHTML="+(lastms+intervalDuration*(interval-1))/1000, lastms);   
        setTimeout('window.open("timeout.html");');                                                                         
        }
        else barWidth = interval*increment;                                                                                 
    }

    function resetStart(duration) {                                                                                                     
         if(drawBar) clearInterval(drawBar);                                                                                    
         document.getElementById('bar').style.width = 0;                                                                        
         document.getElementById('showsecs').innerHTML = 0;
         interval = duration;
}

---

下面是对代码的完整重写。 你的系统在循环中使用了100%的CPU，而只是在等待时间的流逝

参数包括：

持续时间（毫秒） 浮动“左”或“右”，将使酒吧进展从一边到另一边 步进毫秒更新频率

---

不幸的是，这并没有解决问题：我在这里测试它，如果你想看看发生了什么：

 <script type="text/javascript">
 function progressBar(duration, float, step) {
    document.getElementById('bar').style.float = float;
    setTimeout(updateProgressBar, step, 0, duration , step, float);
 }

 function updateProgressBar(elapsed, duration, step, float) {
    var fullWidth = document.getElementById('container').offsetWidth;
    document.getElementById('bar').style.width = Math.round(
        fullWidth * (elapsed / duration)) + 'px';
    document.getElementById('showsecs').innerHTML = (float === 'right' ? Math.round((duration - elapsed) / 1000):Math.round(elapsed / 1000)) + ' s';
    if(elapsed < duration) {
        setTimeout(updateProgressBar, step, elapsed + step, duration, step, float);
    }
 }
 </script>

 <div id="container">
     <div id="bar"></div>
 </div>
 <div id="showsecs">
 </div>
 <script type="text/javascript">
     progressBar(10000, 'left', 50);
 </script>