crazy demo

Question

目前我有这段代码

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秒

Answer 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

Answer 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() ，当它变为零时停止。

Answer 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()">

希望这会有所帮助。

jQuery倒计时器

3 个答案:

crazy demo

another crazy demo

的 jsFiddle example