Javascript 如何加快倒计时？

我正在使用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

}

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

谢谢你的回复

---

编辑：这里是查看倒计时的步骤，并获得更深入的了解

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

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

使用只运行一次的超时，然后添加额外的时间，然后再次运行超时，直到达到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);

  }

}

var计数=0；
var-ms=200；
var阶跃=5；
var计数器=设置超时（计时器，毫秒）//1000将每1秒运行一次
函数计时器（）
{
计数=计数+1；
如果（count使用只运行一次的超时，则添加额外的时间并再次运行超时，直到达到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);

  }

}

var计数=0；
var-ms=200；
var阶跃=5；
var counter=setTimeout（计时器，毫秒）；//1000将每1秒运行一次
函数计时器（）
{
计数=计数+1；
if（count使用setTimeout将为您提供对计数器的更多控制。下面是一个工作示例，您可以在其中处理计数器的速度。它将使您每次调用
time
函数的时间增加30毫秒到70毫秒


var计数=0；
var回路=1000；
var区间；
var text=document.getElementById（'countdown'）；
var range=document.getElementById（'range'）；
var btn=document.getElementById（'btn'）；
var span=document.getElementById（'val'）；
range.addEventListener（'change'，函数（e）{
span.innerHTML=range.value+'ms'；
});
btn.addEventListener（'click'，函数（e）{
计时器（parseInt（range.value））；
});
功能计时器（时间）
{
console.log（时间）；
如果（计数<24）
{
计数=计数+1；
text.value=计数；
循环-=时间；
间隔=设置超时（函数（）{
计时器（时间）；
}，回路）；
如果（计数>=24）{
清除超时（间隔）；
回来
}
}
}


增加：


使用setTimeout将为您提供对计数器的更多控制。下面是一个工作示例，您可以在其中处理计数器的速度。它将使您每次调用
time
函数的时间增加30毫秒到70毫秒


var计数=0；
var回路=1000；
var区间；
var text=document.getElementById（'countdown'）；
var range=document.getElementById（'range'）；
var btn=document.getElementById（'btn'）；
var span=document.getElementById（'val'）；
range.addEventListener（'change'，函数（e）{
span.innerHTML=range.value+'ms'；
});
btn.addEventListener（'click'，函数（e）{
计时器（parseInt（range.value））；
});
功能计时器（时间）
{
console.log（时间）；
如果（计数<24）
{
计数=计数+1；
text.value=计数；
循环-=时间；
间隔=设置超时（函数（）{
计时器（时间）；
}，回路）；
如果（计数>=24）{
清除超时（间隔）；
回来
}
}
}


增加：


最初的解决方案启动速度快，速度慢，但需要相反的效果。我已更新了此解决方案以匹配原始问题。感谢您的回答，它非常灵活，并且缓解效果非常好，如中所示，我可以处理这些值。@NathanTaylor reverse？这是如何工作的？它启动速度快，结束slowly？@ZubairAnwar我将解决方案更改为快速启动和慢速启动，之前它启动缓慢并加速。是这样的吗？哈哈！！我没想到它可以以两种相反的方式完成，在这里我制作了一个相反的动画，是吗？我知道这与我想要的相反。但是，当你提到这一点时，这很酷最初的解决方案开始时速度很快，但速度变慢了，但我们需要相反的解决方案。我已经更新了此解决方案以匹配原始问题。感谢您的回答，它非常灵活，缓解效果非常好，就像中一样，我可以处理这些值。@NathanTaylor reverse？这是如何工作的？它开始快，结束慢@ZubairAnwar我将解决方案更改为快速启动和慢速启动，之前它启动缓慢并加速。是这样的吗？哈哈！！我没想到它可以以两种相反的方式完成，在这里我制作了相反的动画，对吗？我知道它与我想要的相反。但是，当你提到它时，这是很酷的.非常感谢！！非常有魅力。非常感谢！！非常有魅力。甜蜜完全控制，放松效果。甜蜜完全控制，放松效果。