Question

尝试在jQuery中创建一个简单的倒计时器...这种方法有效，但是将数字添加到'0000'的末尾，我希望它转到'0001' '0002' '0003'等...

这一切都发生在jQuery onReady范围内。

var i = '0000'
var timer = function doSomething ( )
{
    i = i+= 1
    $('.counter').text(i);
    console.log(i);

}
setInterval (timer, 1000 );

Answer 1

您的“i”变量必须是整数。当你想在某个地方打印时，可以按照自己喜欢的方式格式化它。

$(document).ready(function() {
    var i = 0;
    var target = $('.counter');
    var timer = function doSomething ( )
    {
        i++;

        var output = pad(i,4);
        target.text(output);
        console.log(output);

    }
    setInterval (timer, 1000 );
});


    function pad(number, length) {

        var str = '' + number;
        while (str.length < length) {
            str = '0' + str;
        }
        return str;

    }

Answer 2

您当前的代码附加到字符串，而不是添加到数字中。它基本上看起来像

i = '0000' + 1, i = '00001' + 1, i = '000011' + 1 ...

等等。您需要保持整数，以继续添加到数字。这是一个示例，它看起来像你想要的格式。

var pad = function(n) { return (''+n).length<4?pad('0'+n):n; };

jQuery.fn.timer = function() {
    var t = this, i = 0;
    setInterval(function() {
        t.text(pad(i++));
    }, 1000);
};

$('#timer').timer();

http://jsfiddle.net/jDaTK/

Answer 3

我会做更像这样的事情：

// Make sure Date.now exists in your environment
Date.now = Date.now || function () { return Number(new Date()); };

var time = 0,
start = Date.now(),
intervalId;

intervalId = setInterval(function () {
  var seconds, display;
  // get the exact time since the timer was started
  time = Date.now() - start;
  // get the number or seconds, rounded down
  seconds = Math.floor(time / 1000);
  display = '' + seconds;

  // pad the beginning of your display string with zeros
  while (display.length < 4) {
    display = "0" + display;
  }
  console.log(display);
}, 100);

setInterval并不确切。此代码确保尽管显示器可以达到近一秒的时间（理论上），但您跟踪的实际时间始终是自启动计时器以来经过的确切时间量。但是这段代码会每隔十分之一秒更新一次显示，所以它不可能超过几毫秒。

从这里，您可以找到更新显示屏的更智能方法，以确保您具备所需的准确度。如果这需要非常准确，那么你可以确保显示到第二秒的十分之一。

Answer 4

我真的推荐jQuery CountUp插件。我尝试了很多Javascript计数器，这是最容易实现的计数器之一，并带来了很多好东西：

<script type="text/javascript">
    $(document).ready(function(){
        $('#counter').countUp({
            'lang':'en', 'format':'full', 'sinceDate': '22/07/2008-00::00';
        });
    });
</script>        

<div id="counter"></div>

请简单的jQuery Count Up计时器帮助

4 个答案: