【问题标题】：jQuery countdown timerjQuery倒数计时器
【发布时间】：2010-09-24 07:31:13
【问题描述】：

目前我有这个代码

setTimeout(function() { $('#hideMsg').fadeOut('fast'); }, 2000);

我可以将倒数计时器设置为 2 秒吗？

喜欢

<div id="hideMsg">
The entry you posted not valid.
This Box will Close In 2 Seconds
</div>

“此框将在 2 秒内关闭”将自动更改为 2 秒 1 秒

【问题讨论】：

标签： jquery

【解决方案1】：

用setInterval代替setTimeout，然后用clearInterval的组合

var sec = 2
var timer = setInterval(function() { 
   $('#hideMsg span').text(sec--);
   if (sec == -1) {
      $('#hideMsg').fadeOut('fast');
      clearInterval(timer);
   } 
}, 1000);

html

<div id="hideMsg">
The entry you posted not valid.
This Box will Close In <span>2</span> Seconds
</div>

crazy demo

做得更好。

var sec = $('#hideMsg span').text() || 0;
var timer = setInterval(function() { 
   $('#hideMsg span').text(--sec);
   if (sec == 0) {
      $('#hideMsg').fadeOut('fast');
      clearInterval(timer);
   } 
}, 1000);

因此时间将取决于 中的内容。例如，2 是 2 秒，5 是 5 秒，60 是 1 分钟。

another crazy demo

【讨论】：

@Reigel - 忽略仇恨者 - 这对我很有用 :) +1rep
工作得很好，为什么一开始会有延迟？它可以修复吗？谢谢
试试var sec = 2。试试var sec = 3 或var sec = 5 看看会发生什么.. ;) 干杯！
另见，做得更好。上面。
修复延迟设置“sec”为比初始显示消息中的秒数小1。

【解决方案2】：

注意：

直到我读到他的回答，我才意识到这与 Reigel 的回答有多么相似。基本上，唯一的区别是我使用 .delay() 来隐藏div 而不是间隔。不同的选择...

如果您将初始数字放在 中，无论该数字是多少，它都会倒数到零：

$(function() {

               // Number of seconds counter starts at is what's in the span
    var timer, counter = $("#hideMsg span").text();

      // Delay the fadeout counter seconds
    $('#hideMsg').delay(counter * 1000).fadeOut('fast');

      // Update countdown number every second... and count down
    timer = setInterval(function() {

        $("#hideMsg span").html(--counter);
        if (counter == 0) { clearInterval(timer)};

    }, 1000);

});

jsFiddle example

这利用了 jQuery 的原生 .delay()，它使用了一个 setInterval()，当它变为零时会停止。

【讨论】：

【解决方案3】：

在一秒钟后再次设置超时，并像这样设置 div 的 .html()：

setTimeout(function() { $('#hideMsg').html('The entry you posted not valid. <br /> This Box will Close In 1 Second'); }, 1000);

将它们放在一个函数中并像这样运行函数onload：

<body onload="function_name()">

希望这会有所帮助。

【讨论】：

这不会隐藏它。会吗？
您需要同时使用两个超时时间，上面的一个会更改文本，而原来的一个会在 2 秒后淡出？如果您希望隐藏它而不褪色，jquery 中还有“.hide()”或“.toggle()”，它将根据当前状态显示和隐藏。