2025跨年倒计时html代码
时间: 2024-11-28 12:12:49 浏览: 17
在HTML中制作一个简单的2025跨年倒计时,可以利用JavaScript结合HTML来实现动态效果。下面是一个基本的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>2025跨年倒计时</title>
<style>
#countdown {
font-size: 4rem;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="countdown">距离2025跨年还有:</div>
<script>
// 获取日期并计算剩余时间
function getRemainingTime() {
const today = new Date();
const newYear = new Date(today.getFullYear(), 11, 31); // 设置为年底最后一天
const diff = newYear - today; // 计算差值(毫秒)
if (diff <= 0) { // 如果已经过了今年年底,则显示“已过”
document.getElementById('countdown').innerText = "已过";
} else {
// 将毫秒转换为天、小时、分钟、秒
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
// 显示倒计时结果
document.getElementById('countdown').innerText = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
}
}
// 每秒更新倒计时
setInterval(getRemainingTime, 1000);
</script>
</body>
</html>
```
阅读全文