<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Page</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f2f2f2;
}
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.countdown {
font-size: 48px;
font-weight: bold;
margin-bottom: 20px;
}
.label {
font-size: 18px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Countdown Page</h1>
<div class="countdown"></div>
<div class="label">Hours</div>
<div class="countdown"></div>
<div class="label">Minutes</div>
<div class="countdown"></div>
<div class="label">Seconds</div>
</div>
<script>
const countdown = document.querySelector('.countdown');
const hours = document.querySelector('.countdown:nth-child(2)');
const minutes = document.querySelector('.countdown:nth-child(3)');
const seconds = document.querySelector('.countdown:nth-child(4)');
function countdownTimer() {
const endDate = new Date('2023-03-01T12:00:00Z');
const now = new Date();
const timeDiff = endDate - now;
if (timeDiff <= 0) {
clearInterval(interval);
countdown.innerHTML = 'Time is up!';
hours.innerHTML = '00';
minutes.innerHTML = '00';
seconds.innerHTML = '00';
} else {
const hoursDiff = Math.floor(timeDiff / (1000 * 60 * 60));
const minutesDiff = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
const secondsDiff = Math.floor((timeDiff % (1000 * 60)) / 1000);
countdown.innerHTML = `${hoursDiff} : ${minutesDiff} : ${secondsDiff}`;
hours.innerHTML = `${hoursDiff < 10 ? '0' : ''}${hoursDiff}`;
minutes.innerHTML = `${minutesDiff < 10 ? '0' : ''}${minutesDiff}`;
seconds.innerHTML = `${secondsDiff < 10 ? '0' : ''}${secondsDiff}`;
}
}
const interval = setInterval(countdownTimer, 1000);
</script>
</body>
</html>这个页面使用了HTML、CSS和JavaScript来实现倒计时功能。在JavaScript中，我们使用了setInterval函数来每秒钟更新一次倒计时，并使用了Math模块来计算时间差。在页面加载时，我们会立即开始倒计时，并在倒计时结束时显示“Time is up!”的提示信息。
