12. 请写出倒计时 页面内容为“距离放假还有00:00:00”,要求时分秒为真实动态效果
时间: 2023-08-21 09:01:48 浏览: 16
好的,以下是一个简单的倒计时页面示例,实现时分秒的真实动态效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>倒计时页面</title>
</head>
<body>
<h1>距离放假还有<span id="countdown">00:00:00</span></h1>
<script>
// 目标时间为放假的日期和时间,可根据实际需求修改
var targetDate = new Date("2022-02-01T00:00:00Z");
// 更新倒计时显示的函数
function updateCountdown() {
var now = new Date();
var diff = targetDate - now;
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML = padZero(days) + ":" + padZero(hours) + ":" + padZero(minutes) + ":" + padZero(seconds);
}
// 在倒计时数字不足两位时在前面补零的函数
function padZero(num) {
return (num < 10 ? "0" : "") + num;
}
// 每秒更新一次倒计时显示
setInterval(updateCountdown, 1000);
</script>
</body>
</html>
```
此页面会根据目标时间(即放假的时间)计算当前距离目标时间的时间差,并实时更新倒计时显示。您可以根据实际需求修改目标时间,以达到您需要的倒计时效果。