如何使用jQuery创建一个5秒倒计时器，在结束时弹出登录窗口？

Question

如何创建一个 jQuery 计时器，当鼠标滑过链接时启动，依次显示 1、2、3、4 和 5。然后在 5 上弹出一个登录框？

谢谢。

- Tapha

Answer 1

如何考虑：

var counter = 0;
var interval = setInterval(function() {
    counter++;
    // Display 'counter' wherever you want to display it.
    if (counter == 5) {
        // Display a login box
        clearInterval(interval);
    }
}, 1000);

- VoteyDisciple

---

不错的简洁答案-添加了倒计时和工作演示-http://jsbin.com/igoxo/3/ - Dr. Frankenstein

你不需要使用 clearInterval(interval) 吗？你应该使用 interval 变量来调用函数，而不是 counter 变量。 - linkyndy

如果我想让它在页面的x个不同位置运行怎么办？我该如何为每个人单独运行它？ - aiternal

将 var counter = 0; 替换为 var counter = 5;，将 counter++; 替换为 counter--;，将 if (counter == 5) { 替换为 if (counter == 0) {，然后就完成了！现在你有一个真正的倒计时，而不是计数。 ;) - Key-Six

Answer 2

这恰好是对我有效的代码：

<p>You'll be automatically redirected in <span id="count">10</span> seconds...</p>

<script type="text/javascript">

window.onload = function(){

(function(){
  var counter = 10;

  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    // Display 'counter' wherever you want to display it.
    if (counter === 0) {
    //    alert('this is where it happens');
        clearInterval(counter);
    }

  }, 1000);

})();

}

</script>

<meta http-equiv="refresh" content="10;url=http://www.example.com" />

希望它能帮上忙 ;)

- Ifti Mahmud

Answer 3

http://jsfiddle.net/brynner/Lhm1ydvs/

HTML

<span class="c" id="5"></span>

JavaScript

function c(){
    var n=$('.c').attr('id');
    var c=n;
    $('.c').text(c);
    setInterval(function(){
        c--;
        if(c>=0){
            $('.c').text(c);
        }
        if(c==0){
            $('.c').text(n);
        }
    },1000);
}

// Start
c();

// Loop
setInterval(function(){
    c();
},5000);

- Brynner Ferreira