Добавление ведущих нулей в таймер Javascript

Question

Я пытаюсь добавить ведущие нули в значение секунд, и я продолжаю сталкиваться с ошибками. Я пробовал несколько выбранных решений, размещенных здесь, и не может показаться, что он работает.

Я вытягиваю значения из пролетов, потому что эти значения поступают из базы данных.

var timer = $('.timer'); 

$('.prev-button,.next-button').hide(); 

setInterval(function() { 

    var m = $('.min', timer), 
     s = $('.sec', timer); 

    if (m.length == 0 && parseInt(s.html()) <= 0) { 
     timer.html('Proceed to the Next Slide'); 
     $('.prev-button,.next-button').fadeIn(); 
    } 

    if (parseInt(s.html()) <= 0) { 
     m.html(parseInt(m.html() - 1)); 
     s.html(60); 
    } 

    if (parseInt(s.html()) < 10) { 

     $('.sec').prepend(0) 

    } 


    if (parseInt(m.html()) <= 0) { 

     timer.html('Time remaining for this slide - <span class="sec">59</span> seconds') 

    } 

    s.html(parseInt(s.html() -1)); 

}, 1000); 

http://jsfiddle.net/certainstrings/a2uJ2/1/

Answer 1

Я модифицировал свой скрипт, чтобы он работал. http://jsfiddle.net/a2uJ2/3/

Вы должны хранить время в javascript int vars, а не читать его из элементов html каждый раз. Это вызывает проблему ремонтопригодности при подключении логики к макету вашего html-документа.

Я не исправил весь ваш код, но я создал две переменные, которые используются для выполнения вычислений.

Answer 2

попробовать так:

if (parseInt(s.html()) < 10) { 

     $('.sec').val('0' + $('.sec').val()); 

    } 

Answer 3

Вы будете нуждаться, чтобы рассматривать значение как string, а не как int. JavaScript довольно агрессивен в преобразовании вещей, которые выглядят как цифры в числа, и это то, что происходит здесь.

Answer 4

Пара вещей: Вам было бы лучше регистрировать время начала и сравнивать с тем, что находится внутри функции интервала. Таймеры не гарантируются точно, но вместо этого будут запускаться по или после заданного вами интервала. Если компьютер занят, таймер может опоздать.

Кроме того, если вы используете parseInt, всегда, всегда укажите аргумент radix (базовая цифра). Если вы этого не сделаете, строка «08» будет проанализирована на «0», потому что начальный ноль будет проинтегрирован как восьмеричный (base-8). Поэтому используйте parseInt(string, 10) для анализа на обычный номер базы-10.

Что касается добавления начального нуля, я бы сказал, что вы должны хранить пару переменных на общее количество секунд, а не на чтение/запись элементов все время.

Updated you jsfiddle

var duration, startTime, interval; 

duration = parseInt($(".min").text(), 10) * 60 + parseInt($(".sec").text(), 10); 
startTime = (new Date()).getTime(); 

function countDown() { 
    var elapsed, remaining, m, s; 
    elapsed = ((new Date()).getTime() - startTime)/1000; 
    remaining = duration - elapsed; 

    if(remaining <= 0) { 
     clearInterval(interval); 
     $(".timer").text('Proceed to the Next Slide'); 
     $('.prev-button,.next-button').fadeIn(); 
    } else { 
     m = String(Math.round(remaining/60)); 
     s = String(Math.round(remaining % 60)); 
     if(s < 10) { 
      s = "0" + s; 
     } 
     $(".min").text(m); 
     $(".sec").text(s); 
    } 
} 

interval = setInterval(countDown, 500); 

Это просто минимальное изменение от вас кода. Я бы, наверное, сделал что-то принципиально иное, чтобы разметка и JS были как можно более раздельными, и так далее и т. Д., Но это тоже работает.