Отсчет времени от х до 0 в Javascript?

Question

У меня есть из бэкэнда время в формате 00:12:54, и я отображаю его на экране. Но я бы хотел, чтобы это время продолжало снижаться. У меня есть хотя создать переменную в javascript, которая будет старое время и с setTimeout для цикла для отображения с document.getElementById новое значение. Я думаю, это может быть проблематично, если у меня будет много времени, чтобы спуститься в одно и то же время. Мне может потребоваться массив?

Как бы вы это сделали? Если у меня нет другого предложения, я попробую свой путь, но мне любопытно узнать, есть ли у него более безопасный способ сделать это.

Answer 1

Знаете ли вы jQuery Framework? Это фреймворк Javascript, в котором есть множество утилит, методов и функций, которые позволяют вам легче выполнять Javascript.

Вот плагин обратного отсчета (не проверял его).

Я предлагаю вам скачать JQuery , чем скачать плагин . Проверьте образец кода на вкладке «родственник» на сайте. Вы можете иметь что-то вроде:

 $('#until2d4h').countdown({until: '+12M +54S'});

* Единственный недостаток, который я предлагаю вам, заключается в том, что вам потребуется 2 .js для добавления. Попробуйте добавить их только при необходимости, и вы найдете.

Answer 2

Общий алгоритм:

1. Время чтения с сервера.
2. Считать текущее время.
3. Вызов функции.
4. В вашей функции прочитайте текущее время, получите дельту от начального времени, которое вы прочитали в шаге 2.
5. Вычтите дельту из начального времени, которое вы прочитали с сервера в шаге 1, и отобразите остаток.
6. Функция должна вызывать window.setTimeout, чтобы вызвать себя через 1000 мс (или настроить в соответствии с временем, прошедшим внутри функции), если вы хотите продолжить обратный отсчет.

Вот черновик:

window.onload = function () {
    var countdown_start_in_ms = 6000; // from server

    function tick() {
        var now = new Date().getTime();
        var disp = start - now;

        if (disp < 0) {
            disp = 0;
        }

        var el = document.getElementById("countdown");

        el.innerHTML =
            // quick hack to format time
            /(\d\d:\d\d:\d\d) ...$/.exec(new Date(disp).toUTCString())[1];

        if (disp > 1000) {
            var elapsed = new Date().getTime() - now;
            window.setTimeout(tick, 1000 - elapsed);
        } else {
            // stop countdown and set color to light grey
            el.style.color = "#ccc";
        }
    }

    var start = new Date().getTime() + countdown_start_in_ms;
    tick();
}

Answer 3

Вам не понравится вкус этого, но он пойдет вам на пользу:

Google для ' таймер javascript ' и получите грязные руки, читая различные примеры и учебные пособия, возвращаемые этим поиском.

Вы узнаете намного больше, чем просто как написать таймер обратного отсчета. : -)

Удачи!

Answer 4

Взгляните на Возьмите руки и установите свое время. и проверьте его код. Хотя он написан с помощью Dojo, часть "clock" написана на простом JavaScript. В вашем случае единственная разница заключается в том, как продвигать счетчик & mdash; уменьшите, а не увеличьте.