jQuery 基于剩余天数、小时数、分钟数和秒数的倒数计时器

Question

我正在创建一个系统，我必须根据客户端的初始化来检查截止日期。例如，如果客户端的初始化是今天的时间 x，截止日期是明天或将来的时间 y，我想计算倒数计时器的剩余时间通知。我设法获得了剩余时间，我的问题是倒数计时器显示剩余天数、小时数、分钟数和秒数。

下面的HTML代码表示到deadline的剩余时间

<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

我相信这就是您要找的。我添加了评论以准确显示正在发生的事情。如果有任何不清楚的地方，请告诉我。我只是随机选择了一个日期作为目标日期，但您可以将其更改为任何您想要的日期:)

$(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>

Answer 2

考虑以下示例。

$(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

jQuery 基于剩余天数、小时数、分钟数和秒数的倒数计时器

jQuery Count Down timer based on Remaining Days, Hours, Minutes and Seconds

javascript

jquery

countdown