javascript - 如何加快倒计时?

标签 javascript html countdowntimer

我正在使用 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 ,以查看倒计时并获得更深入的洞察力。

最佳答案

您需要使用 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/

关于javascript - 如何加快倒计时?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28000415/

相关文章:

android - 如何恢复CountDownTimer?

java - 定时器之前的状态未清除

java - recyclerview 中的倒数计时器无法正常工作

javascript - 如何从 HTML 字符串向网页动态添加脚本?

javascript - Unicode 字符无法在 HTML5 Canvas 中正确呈现

html - 如何定位 css3 中除第一个标签以外的所有标签?

javascript - 如何使用 Twitter Boootstrap 的表单验证工具提示消息?

html - W3C 验证器未通过 <nobr> 标记

javascript - D3.js:如何在版本 4 中将分布线添加到直方图中

javascript - 如何将主干路由器应用于完整路径,而不是哈希