Простой таймер подсчета времени jQuery, пожалуйста,

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 = '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 2

Ваша переменная 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 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>