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>