html实现倒计时
<!DOCTYPE html>
<html>
<head>
<title>倒计时示例</title>
</head>
<body>
<h1 id="titleCountDown"></h1>
<div id="countdown"></div>
<script>
// 目标日期
var targetDate = new Date("2024-10-11T15:40:00");
const year = targetDate.getFullYear();
const month = targetDate.getMonth() + 1;
const day = targetDate.getDate();
const hours = targetDate.getHours();
const minutes = targetDate.getMinutes();
const seconds = targetDate.getSeconds();
document.getElementById("titleCountDown").innerHTML = `距离${year}-${month}-${day} ${hours}:${minutes}:${seconds}还有：`
var timer = null;
// 更新倒计时
function updateCountdown() {
var now = new Date();
var timeLeft = targetDate - now;
if (timeLeft < 0) {
document.getElementById("countdown").innerHTML = "时间已过";
return;
}
// 计算剩余的天、小时、分钟和秒
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
// 更新页面上的倒计时显示
document.getElementById("countdown").innerHTML = days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒";
// 每秒钟更新一次倒计时
timer && clearTimeout(timer);
timer = setTimeout(updateCountdown, 1000);
}
// 启动倒计时
updateCountdown();
</script>
</body>
</html>
原文地址：https://blog.csdn.net/weixin_40745534/article/details/142850182
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！