倒计时：精确到天时分秒的计时器html前端设计
以下是一个简单的网页计时器示例，使用JavaScript实现，精确到天时分秒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时计时器</title>
<script>
// 设定目标时间，这里设置为10天后
var targetTime = new Date().getTime() + 10 * 24 * 60 * 60 * 1000;
function countdown() {
var now = new Date().getTime();
var distance = targetTime - now;
// 如果时间已过，显示已结束
if (distance < 0) {
clearInterval(intervalId);
document.getElementById("countdown").innerHTML = "已结束";
return;
}
// 计算时间
var days = Math.floor(distance / (24 * 60 * 60 * 1000));
var hours = Math.floor((distance % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
var minutes = Math.floor((distance % (60 * 60 * 1000)) / (60 * 1000));
var seconds = Math.floor((distance % (60 * 1000)) / 1000);
// 输出结果到页面
document.getElementById("countdown").innerHTML = days + "天 " + hours + "时 "
+ minutes + "分 " + seconds + "秒";
}
// 页面加载完成后开始倒计时
window.onload = function() {
var intervalId = setInterval(countdown, 1000);
};
</script>
</head>
<body>
<div id="countdown"></div>
</body>
</html>这段代码会在页面加载后开始显示倒计时，并且每秒更新一次显示的时间。当目标时间到达或者过去时，计时器会自动停止。
评论已关闭