Question

我对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;                                                                                                          
}

Answer 1

更改应该相当简单：您必须从结尾开始（interval = duration）并递减interval--。

修改后的代码：

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;
}

Answer 2

这是对代码的完全重写。你在循环中使用了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>

递减进度条而不是使用javascript增量

2 个答案: