需要使用 JavaScript 编写一个函数,计算时间差,然后动态更新网页上的计时器。以下是一个基本的代码示例:
<!-- html -->
<div id="countdown"></div>
// javascript
function countdown(endDate) {
var days, hours, minutes, seconds;
endDate = new Date(endDate).getTime();
if (isNaN(endDate)) {
return;
}
setInterval(calculate, 1000);
function calculate() {
var startDate = new Date();
var diff = parseInt((endDate - startDate.getTime()) / 1000);
if (diff <= 0) {
clearInterval(interval);
return;
}
days = parseInt(diff / 86400);
diff = diff % 86400;
hours = parseInt(diff / 3600);
diff = diff % 3600;
minutes = parseInt(diff / 60);
diff = diff % 60;
seconds = parseInt(diff);
document.getElementById('countdown').innerHTML = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's';
}
}
countdown('December 25, 2021 00:00:00');
这段代码会在网页上显示一个倒计时,直到圣诞节为止。您可以使用 CSS 来控制计时器的样式和布局。