ООО «ПРкениг»
236006 Калининград Московский проспект 40
8 (4012) 39 09 55
info@pr-kenig.ru,

js таймер обратного отсчета для сайта, для баннера tweenui

js таймер обратного отсчета для сайта, для баннера tweenui
js таймер обратного отсчета для сайта, для баннера tweenui
Автор Дмитрий Грозный Дмитрий Грозный 25/09/2018

Принцип применения простой.

Разместите данный код под секцией, в которой необходимо вести обратный отсчет времени:

//time
(function () {
    //Значения переменных, которые необходимо заменить
    var date_end = '2018-10-12T10:00:00.000+02:00',
        selector_day =    '#tui-38',
        selector_hour =   '#tui-40',
        selector_minute = '#tui-42',
        selector_second = '#tui-44';
    //Получает и устанавливает значения
    var setTime = function () {
        var all_seconds = getUnixTime() / 1000,
            day = Math.floor(all_seconds / 86400),
            hour = Math.floor((all_seconds - day * 86400) / 3600),
            minute = Math.floor((all_seconds - day * 86400 - hour * 3600) / 60),
            second = Math.floor(all_seconds - day * 86400 - hour * 3600 - minute * 60);
        setValue(selector_day, day);
        setValue(selector_hour, hour);
        setValue(selector_minute, minute);
        setValue(selector_second, second);
    };
    //Приводит числа в строку с ведущим нулем
    var leadingZero = function (num) {
        num = num.toString();
        return num.length === 1 ? '0' + num : num;
    };
    //Находит элемент и устанавливает новое текстовое содержимое элемента 
    var setValue = function(selector, value){
        var elem = document.querySelector(selector).firstChild;
        elem.innerText = leadingZero(value);
    };
    //Получает разницу между будущего и текущего времени
    var getUnixTime = function () {
        var difference = Date.parse(date_end) - Date.now();
        return difference < 0 ? 0 : difference;
    };
    //Инициализируем интервал каждую секунду
    setInterval(setTime, 1000);
})();

js

Просмотров: 373

Заказать проект

Наша команда профессионалов готова реализовать ваши проекты, заполните форму: