Таймер обратного отсчета на js

Простой таймер обратного отсчета на js

Открыть

        
html::
        
<div class="js__timer tt-timer" data-end="2020-01-01 00:00:00"></div>   

js::

 const jsTimer = {
        initTimer: () => {
            function betweenDates(finish) {
                let t = Date.parse(finish) - Date.parse(new Date());
                let seconds = Math.floor((t / 1000) % 60);
                let minutes = Math.floor((t / 1000 / 60) % 60);
                let hours = Math.floor((t / 1000 / 60 / 60) % 24);
                let days = Math.floor((t / (1000*60*60*24)));

                if(seconds < 10) {
                    seconds = '0'+seconds;
                }
                if(minutes < 10) {
                    minutes = '0'+minutes;
                }
                if(hours < 10) {
                    hours = '0'+hours;
                }
                if(days < 10) {
                    days = '0'+days;
                }
                if(t <= 0) {
                    seconds = '00';
                    minutes = '00';
                    hours = '00';
                    days = '00';
                }
                return {
                    'total': t,
                    'seconds': seconds,
                    'minutes': minutes,
                    'hours': hours,
                    'days': days
                }
            }

            function setClock(className, endtime) {
                let timer = document.querySelector(className),
                    timeInterval = setInterval(updateClock, 1000);
                timer.classList.add('tt-timer');
                function updateClock() {
                    let t = betweenDates(endtime);
                    timer.innerHTML = `
                    <span class="tt-wrap">
                      <span class="tt-value">${t.hours}</span>
                    </span>
                    <span class="tt-wrap">
                      <span class="tt-separator">:</span>
                    </span>
                    <span class="tt-wrap">
                      <span class="tt-value">${t.minutes}</span>
                    </span>
                    <span class="tt-wrap">
                      <span class="tt-separator">:</span>
                    </span>
                    <span class="tt-wrap">
                      <span class="tt-value">${t.seconds}</span>
                    </span>
                  `;
                    if(t.total <= 0) {
                        clearInterval(timeInterval);
                    }
                };
            };

            const finish = $('.js__timer').attr('data-end');
            const finish2 = $('.js__timer-2').attr('data-end');
            setClock('.js__timer', finish);
            setClock('.js__timer-2', finish2);
        }
    };
    
     jsTimer.initTimer();
    
        
    

Для множественного вызова на странице

Открыть

        
html::
        
<div class="js__timer tt-timer" data-end="2020-01-01 00:00:00"></div>   

js::

  function betweenDates(finish) {
        let t = Date.parse(finish) - Date.parse(new Date());
        let seconds = Math.floor((t / 1000) % 60);
        let minutes = Math.floor((t / 1000 / 60) % 60);
        let hours = Math.floor((t / 1000 / 60 / 60) % 24);
        let days = Math.floor((t / (1000*60*60*24)));

        if(seconds < 10) {
            seconds = '0'+seconds;
        }
        if(minutes < 10) {
            minutes = '0'+minutes;
        }
        if(hours < 10) {
            hours = '0'+hours;
        }
        if(days < 10) {
            days = '0'+days;
        }
        if(t <= 0) {
            seconds = '00';
            minutes = '00';
            hours = '00';
            days = '00';
        }
        return {
            'total': t,
            'seconds': seconds,
            'minutes': minutes,
            'hours': hours,
            'days': days
        }
    }
    
    
    
    
    $(document).ready(function(e){

        $('.js__timer').each(function(e){
            var that = $(this);
            var time = $(this).attr('data-end');

            $(this).addClass('tt-timer');

            var timeInterval = setInterval(updateClock, 1000);

            function updateClock() {
                var t = betweenDates(that.attr('data-end'));
               
                that.html(`
                    <span class="tt-wrap">
                      <span class="tt-value">${t.hours}</span>
                    </span>
                    <span class="tt-wrap">
                      <span class="tt-separator">:</span>
                    </span>
                    <span class="tt-wrap">
                      <span class="tt-value">${t.minutes}</span>
                    </span>
                    <span class="tt-wrap">
                      <span class="tt-separator">:</span>
                    </span>
                    <span class="tt-wrap">
                      <span class="tt-value">${t.seconds}</span>
                    </span>
                  `);
                if(t.total <= 0) {
                    clearInterval(timeInterval);
                }
            };

           // setClock($(this)[0].className,time);
        })

    });
        
    

Установка даты

Открыть

        
php::

echo date('Y-m-d h:i:s');

js:: например

var date = new Date( );
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();

console.log(year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds);

        
    
Тэги:

Комментарии (0)


Оставить комментарий

Success/Error Message Goes Here

TOP