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

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，但应该可以正常工作。

Answer 2

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

},1000);

这是*example *

Answer 3

我制作了一个小jquery插件，完全符合您的要求：

http://plugins.jquery.com/project/countTo

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

Answer 4

您不需要插件。使用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/

处的工作示例

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

4 个答案:

检查http://jsfiddle.net/GSWRW/