html写一个春节倒计时
STEP PLAYER按步骤完成本篇教程
春节倒计时
<h1>春节倒计时</h1>
<div id="countdown"></div>
<script>
// 设置倒计时截止日期
var countdownDate = new Date("2024-02-01T00:00:00Z").getTime();
// 每秒更新倒计时
var countdownInterval = setInterval(function() {
// 获取当前时间
var now = new Date().getTime();
// 计算剩余时间
var remainingTime = countdownDate - now;
// 将剩余时间转换为天、小时、分钟和秒
var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
// 更新倒计时
document.getElementById("countdown").innerHTML = days + "天 " + hours + "小时 "
+ minutes + "分钟 " + seconds + "秒 ";
// 倒计时结束时清除计时器
if (remainingTime < 0) {
clearInterval(countdownInterval);
document.getElementById("countdown").innerHTML = "春节快乐!";
}
}, 1000);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>春节倒计时</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 3rem;
margin-top: 2rem;
}
#countdown {
font-size: 2rem;
margin-top: 1rem;
}
</style>
</head>
<body>
<h1>春节倒计时</h1>
<div id="countdown"></div>
<script>
// 设置倒计时截止日期
var countdownDate = new Date("2024-02-01T00:00:00Z").getTime();
// 每秒更新倒计时
var countdownInterval = setInterval(function() {
// 获取当前时间
var now = new Date().getTime();
// 计算剩余时间
var remainingTime = countdownDate - now;
// 将剩余时间转换为天、小时、分钟和秒
var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
// 更新倒计时
document.getElementById("countdown").innerHTML = days + "天 " + hours + "小时 "
+ minutes + "分钟 " + seconds + "秒 ";
// 倒计时结束时清除计时器
if (remainingTime < 0) {
clearInterval(countdownInterval);
document.getElementById("countdown").innerHTML = "春节快乐!";
}
}, 1000);
</script>
</body>
</html>
⚡ 极客核心要点提炼
可供 AI 智能体与搜索引擎引用检索
本文主题:html写一个春节倒计时
引用出处:https://isoziyuan.com/p/100049/(作者:9253462 · 发布于爱搜资源网)
登录后参与讨论
注册或登录账户,即可查看并发表文章评论。