Показать сообщение отдельно
  #4 (permalink)  
Старый 15.01.2021, 01:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,114

таймер между датами
Hovik,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">

    <style type="text/css">
        @import url('https://fonts.googleapis.com/css?family=Old%20Standard%20TT&display=swap');
        ul.timer {
            list-style: none;
            display: flex;
            font-size: 3em;
            margin: 20px;
            padding: 0;
            justify-content: center;
            font: 400 2.4em / 23px "Old Standard TT", sans-serif;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            let timer_start, timer_end, distance, hour, minut, second, now;
            now = Date.now();
            timer_start = new Date("2021-01-13 12:32:46").getTime();
            timer_end = new Date("2021-01-15 12:32:46").getTime();
            distance = (timer_end - now) / 1000 ;
            if (now < timer_start || now > timer_end) return;
            let x = setInterval(() => {
                distance--
                hour = Math.floor(distance / (60 * 60));
                minut = Math.floor(distance / 60 % 60);
                second = Math.floor(distance % 60)
                $('.timer').html('<li>' + hour + ':</li><li>' + minut.toString().padStart(2, "0") + ':</li><li>' + second.toString().padStart(2, "0") + '</li>')
            }, 1000);
            if (distance < 0) clearInterval(x);
        });
    </script>
</head>
<body>
    <ul class="timer" id="timer"></ul>
</body>
</html>
Ответить с цитированием