如何加快倒计时？

Question

我正在使用 Javascript 进行基本倒计时，其中，倒计时从 0 开始，然后结束到 24，这就是倒计时的想法，我想在 24 结束。这是代码：

var count=0;

var counter=setInterval(timer, 50); //1000 will  run it every 1 second

function timer()
{
  count=count+1;
  if (count >= 24)
  {
     clearInterval(counter);
     //counter ended, do something here
      document.getElementById("countdown").innerHTML=24 ;

     return;
  }

  //Do code for showing the number of seconds here
     document.getElementById("countdown").innerHTML=count ; // watch for      spelling

}

现在的问题是，如果你注意到这一点，倒计时发生得非常快，这就是预期的效果。然而问题是，有没有一种方法可以产生平滑的缓动型效果，倒计时开始缓慢，然后在结束时加速？如何实现这种效果？

感谢您的回复。

编辑： 这里是 the fiddle，以查看倒计时并获得更深入的见解。

Answer 1

您需要使用 setTimeout 而不是 setInterval 和 setTimeout 的另一个变量。

    var count=0;
    var speed = 1000;
    timer();

    function timer()
    {
      count++;

      //Do code for showing the number of seconds here
         document.getElementById("countdown").innerHTML=count ; // watch for      spelling

      if (count >= 24)
      {
         return;
      }

      speed = speed / 6 * 5; // or whatever
      setTimeout(timer, speed);

    }

Fiddle: http://jsfiddle.net/4nnms1gz/2/

Answer 2

使用仅运行秒的超时，然后添加额外的时间并再次运行超时，直到达到 24。

var count=0;
var ms = 200;
var step = 5;
var counter=setTimeout(timer, ms); //1000 will  run it every 1 second

function timer()
{
  count=count+1;
  if (count <= 24)
  {
    //Do code for showing the number of seconds here
     document.getElementById("countdown").innerHTML=count ; // watch for spelling
     ms = ms - step;
     counter = setTimeout(timer, ms);

  }

}

Answer 3

使用 setTimeout 可以让您更好地控制 counter.Here 是一个工作示例，您可以在其中处理 counter.It 的速度，每次调用都会增加 30 毫秒到 70 毫秒的时间time 函数

var count=0;
var loop=1000;
var interval;

var text=document.getElementById('countdown');
var range=document.getElementById('range');
var btn=document.getElementById('btn');
var span=document.getElementById('val');

range.addEventListener('change',function(e){
   span.innerHTML=range.value+' ms';
});
btn.addEventListener('click',function(e){
   timer(parseInt(range.value));
 
});

function timer(time)
{
  
   console.log(time);
  if (count < 24)
  {
     count=count+1;
     text.value=count;
  
   
     loop-=time;
  
  interval=setTimeout(function(){
                            timer(time);
                         },loop);
  
     if(count>=24){
    clearTimeout(interval);
    return;
  }
  }
  

}

<input type='text' id='countdown' value='0'></br>
<input type='range' id='range' max='70' min='30' value='30' >increase by:<span id='val'></span></br>

<input type='button' value='start' id='btn' ></br>

如何加快倒计时？

How to speed up the count down?

html

javascript

countdowntimer