Приветствую!

Очень часто нам при разработке сайта нужно установить на него какой-либо счётчик. Такие задачи могут возникнуть при разработке сайта почти любой тематики. Если по каким-либо причинам, вам не подходят счётчики из сторонних библиотек, то давайте рассмотрим пример создания собственного счётчика.

Плюс такого подхода в том, что вы сможете использовать любую HTML-разметку.

JavaScript код таймера

Мы будем использовать универсальную функцию, которая может отсчитывать время и вперёд и назад:

В её основе лежит вызов функции setTimeout(). После вызова этой функции, через указанное вторым аргументом количество секунд, произойдёт исполнение callback-функции, переданной первым параметром.


jQuery(function($){
    // Обработчик нажатия на кнопку
    $('.js-timer--trigger').click(function(event){
        event.preventDefault();

        let $timer    = $(this).parents('.js-timer');
        let $numbers  = $timer.find('.js-timer--numbers');
        let direction = $timer.data('direction') === 'forward' ? true : false;
        let time      = $timer.data('time');

        // Запускаем таймер
        simpleTimer(time, $numbers[0], direction);
    });

    function simpleTimer(sec, block, forward) {
        let time  = sec;
        forward = forward || false;

        let hour = parseInt(time / 3600);
        if ( hour < 1 ) hour = 0;
        time = parseInt(time - hour * 3600);
        // Добавляем ноль перед цифрой, если она только одна
        if ( hour < 10 ) hour = '0'+hour;

        let minutes	= parseInt(time / 60);
        if ( minutes < 1 ) minutes = 0;
        time = parseInt(time - minutes * 60);
        // Добавляем ноль перед цифрой, если она только одна
        if ( minutes < 10 ) minutes = '0'+minutes;

        let seconds = time;
        // Добавляем ноль перед цифрой, если она только одна
        if ( seconds < 10 ) seconds = '0'+seconds;

        // Обновляем время на странице
        // Здесть можно изменить шаблон вывода цифр
        block.innerHTML = hour+':'+minutes+':'+seconds;

        // Продолжаем
        if (forward) {
            sec++;

            setTimeout(function(){
                simpleTimer(sec, block, forward);
            }, 1000);
        } else {
            sec--;

            if ( sec > 0 ) {
                setTimeout(function(){
                    simpleTimer(sec, block, forward);
                }, 1000);
            }
        }
    }
});

Счётчик с отсчётом вперёд

HTML-код для такого счётчитка:


<div class="js-timer" data-direction="forward" data-time="0">
    <a class="js-timer--trigger standart-button" href="#">Начать отсчёт</a>
    <div class="js-timer--numbers">00:00:00</div>
</div>

Счётчик с отсчётом назад

HTML-разметка этого таймера:


<div class="js-timer" data-direction="back" data-time="30180">
    <a class="js-timer--trigger standart-button" href="#">Начать отсчёт</a>
    <div class="js-timer--numbers">00:00:00</div>
</div>