jQuery Таймер обратного отсчета на основе оставшихся дней, часов, минут и секунд

Question

Я создаю систему, в которой мне нужно проверить крайний срок в зависимости от инициализации клиента. Например, если инициализация клиента произошла сегодня во время x, а крайний срок - завтра или будущее во время y, я хотел бы вычислить оставшееся время, чтобы сообщить таймеру обратного отсчета. Мне удалось узнать оставшееся время, и моя проблема - таймер обратного отсчета, чтобы показать оставшиеся дни, часы, минуты и секунды.

Следующий код HTML указывает оставшееся время до крайнего срока

<span style='color: green;'>
    <span class='e-m-days'>0</span> Days | 
    <span class='e-m-hours'>8</span> Hours | 
    <span class='e-m-minutes'>0</span> Minutes | 
    <span class='e-m-seconds'>1</span> Seconds
</span>

Мой jQuery код:

<script>
    $(function(){
        var days    = parseInt( $('.e-m-days').html() );
        var hours   = parseInt( $('.e-m-hours').html() );
        var minutes = parseInt( $('.e-m-minutes').html() );
        var seconds = parseInt( $('.e-m-seconds').html() );

        var minutesWrap = 0; 
        var hoursWrap = 0; 
        var daysWrap; 
        var hoursRem = hours;

        var timer = seconds; 
        var counter =seconds;

        function countOrdersRemainingTime(){
            var id = setTimeout(countOrdersRemainingTime, 1000); 

            if(timer < 0){
                minutesWrap ++; 

                timer = 59;

            }

            var minRem = minutes - minutesWrap; 

            if( minRem == -1 ){
                hoursWrap + 1;
                minRem = 59;
                var hoursRem = hours - 1;
            }

            if(days == 0 && hours == 0 && minutes == 0 && seconds == 0){
                clearTimeout(id);
            }






            $('.e-m-seconds').html(timer);
            $('.e-m-minutes').html(minRem);
            $('.e-m-hours').html(hoursRem);


            timer --; 
        }

        countOrdersRemainingTime();


    });
</script>

Ключевым моментом является создание таймера обратного отсчета, который считает, пока не будет достигнут крайний срок, то есть до количества дней, часов, минут, и секунды становятся равными нулю. Я пытался часами безуспешно :(.

Answer 1

Рассмотрим следующий пример.

$(function() {
  function getCounterData(obj) {
    var days = parseInt($('.e-m-days', obj).text());
    var hours = parseInt($('.e-m-hours', obj).text());
    var minutes = parseInt($('.e-m-minutes', obj).text());
    var seconds = parseInt($('.e-m-seconds', obj).text());
    return seconds + (minutes * 60) + (hours * 3600) + (days * 3600 * 24);
  }

  function setCounterData(s, obj) {
    var days = Math.floor(s / (3600 * 24));
    var hours = Math.floor((s % (60 * 60 * 24)) / (3600));
    var minutes = Math.floor((s % (60 * 60)) / 60);
    var seconds = Math.floor(s % 60);

    console.log(days, hours, minutes, seconds);

    $('.e-m-days', obj).html(days);
    $('.e-m-hours', obj).html(hours);
    $('.e-m-minutes', obj).html(minutes);
    $('.e-m-seconds', obj).html(seconds);
  }

  var count = getCounterData($(".counter"));

  var timer = setInterval(function() {
    count--;
    if (count == 0) {
      clearInterval(timer);
      return;
    }
    setCounterData(count, $(".counter"));
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="counter" style='color: green;'>
  <span class='e-m-days'>0</span> Days |
  <span class='e-m-hours'>8</span> Hours |
  <span class='e-m-minutes'>0</span> Minutes |
  <span class='e-m-seconds'>1</span> Seconds
</div>

На основе: https://www.w3schools.com/howto/howto_js_countdown.asp

Answer 2

Я считаю, что это то, что вы ищете. Я добавил комментарии, чтобы точно показать, что происходит. Пожалуйста, дайте мне знать, если что-то непонятно. Я просто выбрал случайную дату в качестве целевой, но вы можете изменить ее на все, что захотите:)

$(document).ready(function() {
  const days = $(".e-m-days");
  const hours = $(".e-m-hours");
  const minutes = $(".e-m-minutes");
  const seconds = $(".e-m-seconds");
  
  const targetDate = new Date('May 17, 2020 03:24:00');
  
  function convertMillis(milliseconds, format) {
  var days, hours, minutes, seconds, total_hours, total_minutes, total_seconds;
  
  total_seconds = parseInt(Math.floor(milliseconds / 1000));
  total_minutes = parseInt(Math.floor(total_seconds / 60));
  total_hours = parseInt(Math.floor(total_minutes / 60));
  days = parseInt(Math.floor(total_hours / 24));

  seconds = parseInt(total_seconds % 60);
  minutes = parseInt(total_minutes % 60);
  hours = parseInt(total_hours % 24);
  
  switch(format) {
	case 's':
		return total_seconds;
	case 'm':
		return total_minutes;
	case 'h':
		return total_hours;
	case 'd':
		return days;
	default:
		return { d: days, h: hours, m: minutes, s: seconds };
    }
  };
  
  window.setInterval( function()
  {
    // Where we check if 'now' is greater than the target date
    var date = Date.now();
    if (date > targetDate)
    {
      // Where we break
      console.log("Expired");
      clearInterval();
    } else
    {
      // Where we set values
      var millis = targetDate - date;
      var millisObject = convertMillis(millis);

      // Display values in HTML
      days.text(millisObject.d);
      hours.text(millisObject.h);
      minutes.text(millisObject.m);
      seconds.text(millisObject.s);
    };
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style='color: green;'>
    <span class='e-m-days'>0</span> Days | 
    <span class='e-m-hours'>0</span> Hours | 
    <span class='e-m-minutes'>0</span> Minutes | 
    <span class='e-m-seconds'>0</span> Seconds
</span>