【HTML | CSS | JS】再见2022，一起来写一个响应式跨年倒计时吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022年倒计时</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
#countdown {
font-size: 3em;
margin-bottom: 0.5em;
}
</style>
</head>
<body>
<div id="countdown"></div>
<script>
// 设置新年的日期
const newYear = new Date('Jan 1, 2023 00:00:00');
function countdown() {
const now = new Date();
const distance = newYear - now;
// 时间计算
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 输出结果到页面
document.getElementById('countdown').innerHTML = days + "天 " + hours + "小时 "
+ minutes + "分钟 " + seconds + "秒 ";
// 如果剩余时间小于或等于0，停止计数
if (distance < 0) {
clearInterval(interval);
document.getElementById('countdown').innerHTML = '已经到达2023年';
}
}
// 每秒执行一次countdown函数
countdown();
const interval = setInterval(countdown, 1000);
</script>
</body>
</html>这段代码创建了一个简单的HTML页面，其中包含了一个响应式的倒计时器。它使用了HTML定义结构，CSS为计数器设置样式，并且JavaScript代码负责计算时间并更新页面上的显示。这个实例提供了一个很好的教学示例，展示了如何使用JavaScript创建动态交互式网页。
评论已关闭