Счётчик индивидуального отсчёта времени на чистом JavaScript

Иногда нужно реализовать отсчет времени для каждого посетителя в отдельности, на одностраничниках либо сайтах — без установки плагинов и подключения библиотек (например, jQuery). Для решения этой задачи я разработал счётчик на чистом JavaScript.
Данный счетчик работает следующим образом:

1. Активируется при загрузке страницы.
2. Проверяет наличие записи окончания отсчета в Cookie браузера посетителя.
3. Если запись есть — то считывает её. Если записи нету — то берёт время указанное в настройках скрипта, и делает запись в Cookie браузера посетителя.
4. Производятся преобразования времени в формат для более гибкой настройки оформления счетчика.
5. Выводится счетчик либо надпись о завершении отсчета (если время закончилось) в место вызова скрипта.

Теперь разберём сам код счетчика.
Для начала я записал функции считывания и записи Cookie вот так:

// Чтение Cookie
function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
	
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^s+|s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}
// Запись Cookie
function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

Далее воспользовался записанными выше функциями по работе с Cookie, и проверил существуют ли ранее записанные значения в Cookie с именем “Big Day”.

// Определение времени окончания отсчета
var str = getCookie('Big Day'); // считываем Cookie

if(!str) // Проверяем наличие Cookie с датой окончания времени
{
var BigDay = new Date();
BigDay.setMinutes(BigDay.getMinutes()+1); // устанавливаем время до окончания отсчета
setCookie('Big Day', BigDay, 3); // записываем Cookie
}else{
BigDay = new Date(str);
}

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

// Расчет оставшегося времени и сводим его к секундам
var today = new Date();
var diff = BigDay - today;
var countdown4 = Math.round(diff / 1000) // сводим разницу времени к секундам

Когда у нас есть оставшееся время в секундах, мы можем его подогнать к нужному нам виду. Дабы не засорять статью (так как она немного громоздкая по количеству строк), эта часть скрипта скрыта под спойлер:

// Конвертирование времени из секунд в дни : часы : минуты : секунды
function convert_to_time(secs) {
    secs = parseInt(secs);
    hh = secs / 3600;
    hh = parseInt(hh);
    mmt = secs - (hh * 3600);
    mm = mmt / 60;
    mm = parseInt(mm);
    ss = mmt - (mm * 60);

    if (hh > 23) {
        dd = hh / 24;
        dd = parseInt(dd);
        hh = hh - (dd * 24);
    } else {
        dd = 0;
    }

    if (ss < 10) {
        ss = "0" + ss;
    }
    if (mm < 10) {
        mm = "0" + mm;
    }
    if (hh < 10) {
        hh = "0" + hh;
    }
    if (dd == 0) {
        return (hh + ":" + mm + ":" + ss);
    }
    else {
        if (dd > 1) {
            return (dd + " day " + hh + ":" + mm + ":" + ss);
        }
        else {
            return (dd + " day " + hh + ":" + mm + ":" + ss);
        }
    }
}

Теперь делаем предпоследний рывок и переходим к графической части скрипта. Здесь происходит проверка того, что вывести на страничку — таймер с оставшимся временем или сообщение о том что таймер досчитал до 0:00:00.

// Определяем - выводить дальше таймер или надпись о завершении отсчета
do_cd4 = function() {
    if (countdown4 < 0) {
        document.getElementById('cd4').innerHTML = "Время закончилось!";
    }
    else {
        document.getElementById('cd4').innerHTML = convert_to_time(countdown4);
        setTimeout('do_cd4()', 1000);
    }
    countdown4 = countdown4 - 1;
}

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

document.write("<div id='cd4' style='text-align: center; font-size: 40pt'></div>n"); // Вывод резальтата на страницу
do_cd4(); // запуск графической части скрипта

Вот и всё, счетчик готов «к труду и обороне».

Посмотреть результат можно здесь.
Скачать скрипт можно по этой ссылке.

Автор: Qwikky

Источник