3

我一直无法找到任何好的示例，但我正在寻找一些简单的 jQuery 示例，用于倒计时，30 seconds一旦它击中，它将基本上刷新当前页面0。

每个计数都应显示在一个<div>元素中。

4

1 回答 1

13

这是一个非常简单的实现，可以让您获得正确的想法，

http://jsfiddle.net/2jajy50p/

$(window).ready( function() {

    var time = 30

    setInterval( function() {

        time--;

        $('#time').html(time);

        if (time === 0) {

            location.reload();
        }    


    }, 1000 );

});

根据请求，这里是发生了什么的解释： 在窗口加载时，setInterval设置每个匿名函数调用的持续时间。每 1000 毫秒（1 秒），变量 time 减 1。每次调用，新时间都使用 jQuery 方法附加到 DOM .html()。在同一个函数中，有一个条件语句确定 time === 0; 一旦这评估为真，则使用该location.reload()方法重新加载页面。

编辑

根据评论，询问是否有办法让计时器运行一次，即使在页面重新加载后也是如此：

我建议使用 localStorage （我承认它并不完美），但在任何地方，这是一个有效的实现。

甚至更新的编辑

我回到了这个，正在查看我的答案。因为我是个书呆子，所以我想创建一个更有活力、更容易吸收的解决方案：

var timerInit = function(cb, time, howOften) {
  // time passed in is seconds, we convert to ms
  var convertedTime = time * 1000;
  var convetedDuration = howOften * 1000;
  var args = arguments;
  var funcs = [];

  for (var i = convertedTime; i > 0; i -= convetedDuration) {
    (function(z) {
      // create our return functions, within a private scope to preserve the loop value
      // with ES6 we can use let i = convertedTime
      funcs.push(setTimeout.bind(this, cb.bind(this, args), z));

    })(i);
  }

  // return a function that gets called on load, or whatever our event is
  return function() {

    //execute all our functions with their corresponsing timeouts
    funcs.forEach(function(f) {
      f();
    });
  };

};

// our doer function has no knowledge that its being looped or that it has a timeout
var doer = function() {
  var el = document.querySelector('#time');
  var previousValue = Number(el.innerHTML);
  document.querySelector('#time').innerHTML = previousValue - 1;
};


// call the initial timer function, with the cb, how many iterations we want (30 seconds), and what the duration between iterations is (1 second)
window.onload = timerInit(doer, 30, 1);

http://jsbin.com/padanuvaho/edit?js,输出

于 2014-08-21T00:23:48.083 回答