Форум

Hovik · #1 (**permalink**) 14.01.2021, 01:22

Привет всем хочу реализовать в сайте счетчика обратного отчета с двумя фиксирование датами но не получается прошу помаши, вот код

<ul class="timer" id="timer"></ul>

jQuery(document).ready(function($) {
    
    let timer_start,timer_end, distance, hour,minut, second;

        timer_start = new Date("2021-01-13 12:32:46").getTime();
        timer_end   = new Date("2021-01-14 12:32:46").getTime();
        distance =  ((timer_end - timer_start) / 1000);

let x = setInterval(()=> {

    distance --
    hour = Math.floor((distance / ( 3600 ) %24) );
    minut = Math.floor((distance / 24 / 60 ) % 60) 
    second = Math.floor(distance % 60)
    $('.timer').html('<li>'+hour+':</li><li>'+minut+':</li><li>'+second +'<li>')
}, 1000);

   if (distance < 0) clearInterval(x);
    
    
});

рони · #2 (**permalink**) 14.01.2021, 07:43

Hovik,
проблема то в чём?

Hovik · #3 (**permalink**) 15.01.2021, 00:45

рони,
Счетчик не работает результат должен быт таким

<ul class="timer" id="timer">
<li>23:</li>
<li>59:</li>
<li>59</li>
</ul>

и дальше продолжатся в каждую секунду уменьшатся

<ul class="timer" id="timer">
<li>23:</li>
<li>59:</li>
<li>58</li>
</ul>

рони · #4 (**permalink**) 15.01.2021, 01:30

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>

Hovik · #5 (**permalink**) 15.01.2021, 01:45

рони
разница между датами "2021-01-13 12:32:46" и "2021-01-15 12:32:46" 48 часов а выводится 9 часов 44 минут и 33 сек

рони · #6 (**permalink**) 15.01.2021, 01:58

Hovik,
мне сложно понять вашу логику.

Hovik · #7 (**permalink**) 15.01.2021, 02:01

рони,
извините вы все сделали как всегда правильно, это я запутался все супер спасибо вам огромная

рони · #8 (**permalink**) 15.01.2021, 02:03

Hovik,
ок!

Форум

Справочник

Discord чат

Курсы javascript