javascript/jquery 中的简单 3-2-1 倒计时

Question

我正在尝试创建一个简单的 3-2-1 计数器。我想显示 3、2 和 1，并在倒计时结束时运行一个函数。我尝试了一些无济于事的事情：

$("#count_num").delay(1000).queue(function() {
        $(this).html("2")
        });
$("#count_num").delay(1000).queue(function() {
        $(this).html("1")
        });

并且：

$("#count_num").delay(1000).queue(function() {
        $(this).html("2").delay(1000).queue(function() {
        $(this).html("1")
        });
        });

在这些情况下，它确实达到了 2，但从未达到 1。我还安装了 doTimeout 插件（http://benalman.com/projects/jquery-dotimeout-plugin/ ）并尝试了这个：

$.doTimeout( 1000, function(){
        $("#count_num").html("2");
        });
$.doTimeout( 1000, function(){
        $("#count_num").html("1");
        });

并且：

var count=3;
        $.doTimeout( 1000, function(){
        if ( count==1 ) {
        // do something finally
        return false;
        }
        $("#count_num").html(count);
        count--;
        return true;
        });

我做错了什么？谢谢。

Answer 1

var timer = setInterval(function(){
$("#count_num").html(function(i,html){
   if(parseInt(html)>0)
   {
   return parseInt(html)-1;
   }
   else
   {
   clearTimeout(timer);
   return "KO!!";
   }
 });

},1000);

这是一个*示例*

Answer 2

您不需要为此使用插件。使用 JavaScript，您可以执行以下操作：

var count = 4;
function anim() {
    if (count > 0) {
        console.log(count);
        count--;
        setTimeout(anim, 700);
    }
    else {
        alert('end of counting')
    }
}
anim();

这将从 4 开始倒计时，然后在计数达到 0 时执行函数。

请在 http:// 查看工作示例jsfiddle.net/GSWRW/

Answer 3

我制作了一个小 jquery 插件，它完全可以满足您的需求：

http://plugins.jquery.com/项目/countTo

https://github.com/bartrail/jQuery.countTo

Answer 4

function endCountdown() {
  // logic to finish the countdown here
}

function handleTimer() {
  if(count === 0) {
    clearInterval(timer);
    endCountdown();
  } else {
    $('#count_num').html(count);
    count--;
  }
}

var count = 3;
var timer = setInterval(function() { handleTimer(count); }, 1000);

不那么频繁地使用 jQuery，但应该可以正常工作。