js 1小时倒计时

在JavaScript中实现一个1小时倒计时功能，你需要了解以下几个基础概念：

基础概念

Date对象：用于处理日期和时间。
setInterval()函数：用于定时执行代码块。
DOM操作：用于更新页面上的元素内容。

实现步骤

获取当前时间，并计算1小时后的时间。
使用setInterval()每秒更新一次倒计时。
计算剩余时间并更新页面显示。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1小时倒计时</title>
</head>
<body>
<div id="countdown">1:00:00</div>

<script>
// 设置1小时后的时间
let endTime = new Date();
endTime.setHours(endTime.getHours() + 1);

// 更新倒计时
function updateCountdown() {
    let now = new Date();
    let remainingTime = endTime - now;

    if (remainingTime <= 0) {
        clearInterval(timerId);
        document.getElementById('countdown').textContent = "时间到！";
        return;
    }

    let hours = Math.floor(remainingTime / (1000 * 60 * 60));
    let minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

    document.getElementById('countdown').textContent = 
        `${hours.toString().padStart(1, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

// 每秒更新一次
let timerId = setInterval(updateCountdown, 1000);
updateCountdown(); // 初始化显示
</script>
</body>
</html>