Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   обратный счетчик на сайте (https://javascript.ru/forum/dom-window/25534-obratnyjj-schetchik-na-sajjte.html)

progns 08.02.2012 11:33

обратный счетчик на сайте
 
Здравствуйте, уважаемые js программисты!

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

Может есть готовый скрипт у кого-нибудь?

Заранее благодарю.

Seva1986 08.02.2012 12:16

progns,

такой пойдёт?

function getDaysLeft() {
    var daysLeft = (new Date(2012, 01, 09) - new Date())/1000/60/60/24;
    daysLeft = daysLeft>0 && daysLeft<1 ? 1 : daysLeft;
    if (daysLeft < 0) {
        clearInterval(timer);
        alert('Time is up!');
        return;
    }
    alert(daysLeft);
}

var timer = setInterval(getDaysLeft, 1000*60);
getDaysLeft();

progns 08.02.2012 13:33

Спасибо, но не совсем понимаю как им пользоваться.
выводит "1" Ваш код и все:(

Seva1986 08.02.2012 14:04

Цитата:

Сообщение от progns
"1" Ваш код и все

ну потому что конечная дата стоит завтра а до завтра один день. Если поменять будет другое.
Я так понял вы скрипт совсем не знаете. напишите детальнее куда вам выводить эти данные например id элемента куда вывести число дней, и куда вывести сообщение об окончании времени

progns 08.02.2012 14:57

допустим, есть <div id="test"></div>. Здесь нужно выводить "до события осталось столько-то дней" , естественно с каждым днем уменьшается число (кстати надо выводить 3 дня, 5 дней, 1 день с правильными окончаниями) , а как доходим до заданной даты выводит сообщение о том что "событие прошло". Да, Js я не знаю, можно сказать.

Seva1986 08.02.2012 15:23

progns,

Ок! вечером замучу...

progns 08.02.2012 15:28

допустим, есть <div id="test"></div>. Здесь нужно выводить "до события осталось столько-то дней" , естественно с каждым днем уменьшается число (кстати надо выводить 3 дня, 5 дней, 1 день с правильными окончаниями) , а как доходим до заданной даты выводит сообщение о том что "событие прошло". Да, Js я не знаю, можно сказать.

progns 08.02.2012 15:29

спасибо большое.

Seva1986 08.02.2012 21:17

Вот вроде работает.

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="UTF-8"/>
    <title>Таймер</title>
    <style>
        #test {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="test"></div>

<script>

    function SetDaysTimer(dd, mm, yy, timerElement, message, timerUpdateTime) {
        function getDaysLeft() {
            var daysLeft = (new Date(yy, mm - 1, dd) - new Date()) / 86400000;
            if (daysLeft > parseInt(daysLeft)) daysLeft = parseInt(daysLeft) + 1;
            return daysLeft;
        }

        function formatDays(daysLeft) {
            var doubleEnding = ('0' + daysLeft).slice(-2);
            var singleEnding = ('0' + daysLeft).slice(-1);

            if ((doubleEnding > 10 && doubleEnding < 20) || singleEnding > 4 || singleEnding == 0) {
                return 'дней';
            } else if (singleEnding == 1) return 'день';
            return 'дня';
        }

        function showMessage(daysLeft) {
            if (daysLeft < 0) {
                timerElement.innerHTML = message;
                clearInterval(timer);
                return;
            }
            timerElement.innerHTML = daysLeft + ' ' + formatDays(daysLeft);
        }

        var timer = setInterval(function () {
            showMessage(getDaysLeft())
        }, (timerUpdateTime || 1) * 60000);
        showMessage(getDaysLeft());
    }

    /* Использование
     new SetDaysTimer(
     dd,  - число события
     mm,  - месяц события
     yy,  - год события
     timerElement, - элемент куда выводить сообщение
     message, - текст сообщения
     timerUpdateTime - время обновления сообщения в минутах, по умолчанию 1 минута
     );

     Пример
     */

    new SetDaysTimer(
            21,
            12,
            2012,
            document.getElementById('test'),
            'Конец света наступил',
            5
    );


</script>

</body>
</html>

progns 08.02.2012 21:31

Спасибо огромное. То что нужно.


Часовой пояс GMT +3, время: 18:52.