Таймер обратного отсчета Javascript JQuery

Я пытаюсь создать простой таймер обратного отсчета до даты/времени.

В настоящее время у меня есть только следующие дни, чтобы пойти скрипт, который работает нормально:

<div id="countdown">

today = new Date();
BigDay = new Date("March 29, 2013");
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
document.write(daysLeft + " days to go!");

</div>

Сейчас я пытаюсь создать полный таймер обратного отсчета (с часами, минутами и секундами) и создал следующий скрипт. HTML не отображается на странице.

var today = new Date();
var BigDay = new Date("29 03 2013, 14:30:00");
var msPerDay = 24 * 60 * 60 * 1000 ;
var timeLeft = (BigDay.getTime() - today.getTime());
var e_daysLeft = timeLeft / msPerDay;
var daysLeft = Math.floor(e_daysLeft);
var e_hrsLeft = (e_daysLeft - daysLeft)*24;
var hrsLeft = Math.floor(e_hrsLeft);
var e_minsLeft = (e_hrsLeft - hrsLeft)*60;
var minsLeft = Math.floor(e_minsLeft);
var e_secsLeft = (e_minsLeft - minsLeft)*1000;
var secsLeft = Math.floor(e_secsLeft);
var timeString = daysLeft + " : " + hrsLeft + " : " + minsLeft + " : " + secsLeft;

$('document').ready(function(){

window.setInterval(function(){
$('#countdown').html(timeString);
}, 1000);

});

Я не уверен, в чем может быть проблема. Первый скрипт содержится в html, второй — во внешнем js-файле.

Изменить: теперь отображается html, однако все значения отображаются как NaN.


html jquery countdowntimer
person Razzildinho    schedule 14.03.2013    source источник
comment
Кстати, в var minsLeft = Math.floor((e_minsLeft); что говорит ваша консоль, есть дополнительная открывающая скобка?   -  person isotrope    schedule 14.03.2013
comment
Это улучшило его. Теперь он отображается в html, но каждое значение отображается как NaN.   -  person Razzildinho    schedule 14.03.2013

Ответы (3)


arrow_upward
12
arrow_downward

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

$(function(){
    var BigDay = new Date("29 Mar 2013, 14:30:00");
    var msPerDay = 24 * 60 * 60 * 1000 ;


    window.setInterval(function(){
        var today = new Date();
        var timeLeft = (BigDay.getTime() - today.getTime());

        var e_daysLeft = timeLeft / msPerDay;
        var daysLeft = Math.floor(e_daysLeft);

        var e_hrsLeft = (e_daysLeft - daysLeft)*24;
        var hrsLeft = Math.floor(e_hrsLeft);

        var e_minsLeft = (e_hrsLeft - hrsLeft)*60;
        var minsLeft = Math.floor(e_minsLeft);

        var e_secsLeft = (e_minsLeft - minsLeft)*60;
        var secsLeft = Math.floor(e_secsLeft);


        var timeString = daysLeft + " : " + hrsLeft + " : " + minsLeft + " : " + secsLeft;
        $('#countdown').html(timeString);
    }, 1000);
})

Демонстрация: Fiddle

person Arun P Johny    schedule 14.03.2013
comment
была еще одна проблема с подсчетом секунд, вы использовали (e_minsLeft - minsLeft)*1000 на самом деле это должно быть (e_minsLeft - minsLeft)*60 - person Arun P Johny; 14.03.2013
comment
Я действительно видел эту последнюю ошибку сразу после того, как опубликовал, но забыл отредактировать. - person Razzildinho; 14.03.2013
comment
Да благословит тебя Бог, Арун Джонни. - person user96403; 05.06.2013
comment
@ArunPJohny, если я хочу передать BigDay как строку php, это не сработает; попробовал это: jsfiddle.net/85CNW, но не сработало, что я делаю неправильно? огромное спасибо! - person Abude; 09.09.2013
comment
@ArunPJohny какой-нибудь совет, пожалуйста? - person Abude; 09.09.2013

arrow_upward
0
arrow_downward

У вас здесь ошибка: var minsLeft = Math.floor((e_minsLeft);

Первая скобка не закрыта, должно быть var minsLeft = Math.floor(e_minsLeft);

person couzzi    schedule 14.03.2013

arrow_upward
0
arrow_downward

потому что вы не запускали вычисление timeString каждую секунду, поэтому текст в вашем div #countdown никогда не изменится

person xManh    schedule 14.03.2013
comment
Итак, вся функция должна быть в пределах setInterval? - person Razzildinho; 14.03.2013