Как обратный отсчет до даты

Мне интересно, может ли кто-нибудь помочь мне. После долгих часов поиска неустанно здесь и в Интернете я не могу найти простой обратный отсчет с использованием jquery. Я не хочу использовать какой-либо плагин только простой код jquery для обратного отсчета с даты. Мне удалось найти этот код ниже. Но даже с этим кодом, размещающим его на моем веб-сайте, ничего не появляется. Я добавил файл jquery с jquery.com и добавил соответствующие div с counter ID и ничего. Если кто-нибудь может объяснить или показать мне, как сделать простой обратный отсчет в функции, которая принимает формат даты и возвращает обратный отсчет, я был бы признателен за помощь.

var end = new Date('02/19/2012 10:1 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);

Ответ 1

Это нормально работает как обычный javascript.

<script>
var end = new Date('02/19/2012 10:1 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>

Ваш выход выглядит следующим образом: -

1дней 9hrs 3mins 22secs

UPDATE

Использование функций:

<script>

    CountDownTimer('02/19/2012 10:1 AM', 'countdown');
    CountDownTimer('02/20/2012 10:1 AM', 'newcountdown');

    function CountDownTimer(dt, id)
    {
        var end = new Date(dt);

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById(id).innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById(id).innerHTML = days + 'days ';
            document.getElementById(id).innerHTML += hours + 'hrs ';
            document.getElementById(id).innerHTML += minutes + 'mins ';
            document.getElementById(id).innerHTML += seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);
    }

</script>
<div id="countdown"></div>
<div id="newcountdown"></div>

Выход будет выглядеть следующим образом: -

0 часов 23 часа 25 минут 8 секунд

1 день 23 часа 25 минут 8 секунд

Ответ 2

Это не jQuery, это JavaScript. Но в любом случае...

Ты почти понял. Единственная проблема - var distance = end-now;. Это должно быть:

var distance = end.getTime()-now.getTime();

Кроме того, вы не должны использовать += в innerHTML. Вместо этого используйте переменную (пример: var output = "") и добавьте к ней, затем назначьте innerHTML в конце.

Наконец, дважды проверьте, что идентификатор div соответствует идентификатору, указанному в getElementById.