基于剩余的天，小时，分钟和秒的jQuery Count Down计时器

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

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