如何使这个倒数计时器倒计时到特定日期,而不仅仅是从一个时间开始?



我正在尝试更改此 JavaScript,以便它倒计时到特定日期 - 2019 年 12 月 16 日,而不仅仅是说 15 天,我已经尝试了一些事情但被卡住了。

function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

稍微修改了一下代码以获得工作倒计时。虽然,在修改代码之前,我并没有实际测试代码。

我的代码不考虑闰日或夏令时。所以现在休息了一个小时,因为几周后的时间变化。但是,我的算法可以自我更正。所以在时间变化后它会是正确的。

function getTimeRemaining(endDate) {
var now = new Date();
var timeSpanInMilliseconds = Date.parse(endDate) - now;
var millisecondsInSecond = 1000;
var millisecondsInMinutes = millisecondsInSecond * 60;
var millisecondsInHours = millisecondsInMinutes * 60;
var millisecondsInDays = millisecondsInHours * 24;
var days = Math.floor(timeSpanInMilliseconds / millisecondsInDays);
var remainingMilliseconds = timeSpanInMilliseconds - days * millisecondsInDays;
var hours = Math.floor(remainingMilliseconds / millisecondsInHours);
remainingMilliseconds = remainingMilliseconds - hours * millisecondsInHours;
var minutes = Math.floor(remainingMilliseconds / millisecondsInMinutes);
remainingMilliseconds = remainingMilliseconds - minutes * millisecondsInMinutes;
var seconds = Math.floor(remainingMilliseconds / millisecondsInSecond);
return {
'total': millisecondsInSecond,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endDate) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
var timeInterval = setInterval(updateClock, 1000);
updateClock();
function updateClock() {
var t = getTimeRemaining(endDate);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours < 10 ? '0' + t.hours : t.hours;
minutesSpan.innerHTML = t.minutes < 10 ? '0' + t.minutes : t.minutes;
secondsSpan.innerHTML = t.seconds < 10 ? '0' + t.seconds : t.seconds;
if (t.total <= 0) {
clearInterval(timeInterval);
}
}
}
var endDate = new Date(2019, 11, 16);
initializeClock('clockdiv', endDate);

相关内容

最新更新