Простой таймер на Java Script с CSS оформлением

25.09.2021

Довольно простой, но функциональный пример таймера с выводом убывающего времени.

После истечения времени стартует колбэк.

По первой задумке, цифры должны были перетекать одна в другую, но в FF при этом возник эффект мерцания (при вызове cloneNode).

Этот момент поправлю когда дойдут руки, в остальном код рабочий.

Сам код:

 

let clockEngine = {
    el : {},
    var : {},


    start : function (minute, second, callback) {
        clockEngine.var.bDone = false;
        clockEngine.var.last_second = second;
        clockEngine.var.last_minute = minute;
        clockEngine.el.minutesContainer = document.querySelector('.minutes');
        clockEngine.el.secondsContainer = document.querySelector('.seconds');
        clockEngine.onFinish = callback;

        clockEngine.var.timer = setInterval(clockEngine.updateTime, 1000);
    },
    
    updateTime : function () {

        if (!clockEngine.var.bDone) {

            if (clockEngine.var.last_second < 1) {
                clockEngine.var.last_minute--;
                if (clockEngine.var.last_minute < 0) {
                    clockEngine.var.bDone = true;
                    clearInterval(clockEngine.var.timer);
                    clockEngine.onFinish();
                } else {
                    clockEngine.var.last_second = 59;
                }
            } else {
                clockEngine.var.last_second--;
            }

            if (!clockEngine.var.bDone) {
                clockEngine.updateContainer(clockEngine.el.minutesContainer, clockEngine.var.last_minute);
                clockEngine.updateContainer(clockEngine.el.secondsContainer, clockEngine.var.last_second);
            }

        }
    },

    updateContainer : function  (container, val) {
        val = String(val);

        let time = val.split('');

        if (time.length === 1) {
            time.unshift('0')
        }

        let first = container.firstElementChild;
        if (first.lastElementChild.textContent !== time[0]) {
            clockEngine.updateNumber(first, time[0])
        }

        let last = container.lastElementChild;
        if (last.lastElementChild.textContent !== time[1]) {
            clockEngine.updateNumber(last, time[1])
        }
    },

    updateNumber : function  (element, number) {
        //element.lastElementChild.textContent = number

        element.lastElementChild.textContent = number;

        // let second = element.lastElementChild.cloneNode(true);
        // second.textContent = number;
        //
        // element.classList.add('move');
        // element.classList.add('anti_glitch');
        // element.appendChild(second);

        // setTimeout(function () {
        //     element.classList.remove('anti_glitch');
        // }, 50);
        //
        // setTimeout(function () {
        //     element.classList.remove('move');
        // }, 990);
        // setTimeout(function () {
        //     element.removeChild(element.firstElementChild);
        // }, 990);
    }

};

Пример вызова.

Устанавливаем время 1 минута и 10 секунд:

 
clockEngine.start(1, 10, function () {
    console.debug("ОК");
});

Стили:

 

.clock {
    height: 20vh;
    color: black;
    font-size: 22vh;
    font-family: sans-serif;
    line-height: 20.4vh;
    display: flex;
    position: relative;
    overflow: hidden;
}

.clock > div {
    display: flex;
}

.tick {
    line-height: 17vh;
}

.tick-hidden {
    opacity: 0;
}

.move {
    animation: move linear 1s infinite;
}

/*.move .number:last-of-type {*/
/*    !*display: block !important;*!*/
/*    !*color: green;*!*/
/*}*/

/*.anti_glitch {*/
/*    transform: translateX(200px);*/
/*    !*color: red;*!*/
/*}*/

/*@keyframes move {*/
/*    from {*/
/*        transform: translateY(0vh);*/
/*        !*opacity: 0.5;*!*/
/*    }*/
/*    to {*/
/*        transform: translateY(-20vh);*/
/*        !*opacity: 1;*!*/
/*    }*/
/*}*/

Категории: JavaScript, незаконченные
Пометки: Часы на Java Script + CSS
Яндекс.Метрика