0

Я создал таймеры обратного отсчета. Их может быть несколько и соответственно даты разные.

Отсчет ведется до указанной даты в атрибуте "data-finish"

Почему у меня таймер работает некорректно? $(".timer").each(function() {} не разделяет их. Два таймера работают как бы по одной дате. Надеюсь, вопрос понятен.

function timer(f) {
        var date = new Date(f);
        
        var f_time = Date.parse(date);

        function timer_go() {
            var n_time = Date.now();
            var diff = f_time - n_time;
            if(diff <= 0) return false;
            var left = diff % 1000;
            
            //секунды
            diff = Math.floor(diff / 1000);
            var s = diff % 60;
            if(s < 10) {
                $(".seconds_1").html(0);
                $(".seconds_2").html(s);
            }else {
                $(".seconds_1").html(Math.floor(s / 10));
                $(".seconds_2").html(s % 10);
            }
            //минуты
            diff = Math.floor(diff / 60);
            var m = diff % 60;
            if(m < 10) {
                $(".minutes_1").html(0);
                $(".minutes_2").html(m);
            }else {
                $(".minutes_1").html(Math.floor(m / 10));
                $(".minutes_2").html(m % 10);
            }
            //часы
            diff = Math.floor(diff / 60);
            var h = diff % 24;
            if(h < 10) {
                $(".hours_1").html(0);
                $(".hours_2").html(h);
            }else {
                $(".hours_1").html(Math.floor(h / 10));
                $(".hours_2").html(h % 10);
            }
            //дни
            var d = Math.floor(diff / 24);
            if(d < 10) {
                $(".days_1").html(0);
                $(".days_2").html(d);
            }else {
                $(".days_1").html(Math.floor(d / 10));
                $(".days_2").html(d % 10);
            }
            setTimeout(timer_go, left);
        }
        setTimeout(timer_go, 0);
    }


$(".timer").each(function() {
  console.log($(this).attr("data-finish"));
  timer($(this).attr("data-finish"))
});
.timer{
        font-size: 0;
        text-align: center;
    }
    .timer_section{
        display: inline-block;
        vertical-align: top;
    }
    .timer_section > div{
        display: inline-block;
        vertical-align: top;
        font-size: 50px;
        background: #4dadf7;
        color: #ffffff;
        line-height: 70px;
        width: 55px;
        margin: 0 1px;
        border-radius: 2px;
    }
    .timer_section > div.timer_section_desc{
        display: block;
        background: none;
        color: inherit;
        text-transform: uppercase;
        font-size: 16px;
        line-height: 30px;
        width: auto;
        margin: 0;
    }
    .timer_delimetr{
        display: inline-block;
        vertical-align: top;
        font-size: 50px;
        line-height: 70px;
        margin: 0 5px;
    }
    @media (max-width: 767px){
        .timer_section > div{
            font-size: 30px;
            width: 30px;
            line-height: 40px;
        }
        .timer_delimetr{
            line-height: 40px;
            font-size: 30px;
        }
        .timer_section > div.timer_section_desc{
            font-size: 14px;
            line-height: 26px;
        }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timer" data-finish="2019.09.19 00:00:00">
  <div class="timer_section">
    <div class="days_1">0</div>
    <div class="days_2">0</div>
    <div class="timer_section_desc">дней</div>
    
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="hours_1">0</div>
    <div class="hours_2">0</div>
    <div class="timer_section_desc">часов</div>
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="minutes_1">0</div>
    <div class="minutes_2">0</div>
    <div class="timer_section_desc">минут</div>
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="seconds_1">0</div>
    <div class="seconds_2">0</div>
    <div class="timer_section_desc">секунд</div>
  </div>
</div>



<div class="timer" data-finish="2019.09.21 00:00:00">
  <div class="timer_section">
    <div class="days_1">0</div>
    <div class="days_2">0</div>
    <div class="timer_section_desc">дней</div>
    
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="hours_1">0</div>
    <div class="hours_2">0</div>
    <div class="timer_section_desc">часов</div>
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="minutes_1">0</div>
    <div class="minutes_2">0</div>
    <div class="timer_section_desc">минут</div>
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="seconds_1">0</div>
    <div class="seconds_2">0</div>
    <div class="timer_section_desc">секунд</div>
  </div>
</div>

1 ответ 1

0

Потому что $(".minutes_2") (и другие) внутри функции timer_go() работает со всеми селекторами с классом minutes_2

function timer(f) {
    var date = new Date(f.attr("data-finish"));

    var f_time = Date.parse(date);

    function timer_go(obj) {
        var n_time = Date.now();
        var diff = f_time - n_time;
        if(diff <= 0) return false;
        var left = diff % 1000;

        //секунды
        diff = Math.floor(diff / 1000);
        var s = diff % 60;
        if(s < 10) {
            $(".seconds_1",obj).html(0);
            $(".seconds_2",obj).html(s);
        }else {
            $(".seconds_1",obj).html(Math.floor(s / 10));
            $(".seconds_2",obj).html(s % 10);
        }
        //минуты
        diff = Math.floor(diff / 60);
        var m = diff % 60;
        if(m < 10) {
            $(".minutes_1",obj).html(0);
            $(".minutes_2",obj).html(m);
        }else {
            $(".minutes_1",obj).html(Math.floor(m / 10));
            $(".minutes_2",obj).html(m % 10);
        }
        //часы
        diff = Math.floor(diff / 60);
        var h = diff % 24;
        if(h < 10) {
            $(".hours_1",obj).html(0);
            $(".hours_2",obj).html(h);
        }else {
            $(".hours_1",obj).html(Math.floor(h / 10));
            $(".hours_2",obj).html(h % 10);
        }
        //дни
        var d = Math.floor(diff / 24);
        if(d < 10) {
            $(".days_1",obj).html(0);
            $(".days_2",obj).html(d);
        }else {
            $(".days_1",obj).html(Math.floor(d / 10));
            $(".days_2",obj).html(d % 10);
        }
        setTimeout(timer_go, left,obj);
    }
    setTimeout(timer_go, 0,f);
}

$(".timer").each(function() {
    console.log($(this).attr("data-finish"));
    timer($(this))
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.