在JavaScript中实现一个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>
endTime
的剩余时间,并将其转换为小时、分钟和秒的格式,然后更新页面上的显示内容。updateCountdown
函数,实现实时更新倒计时。localStorage
中,页面加载时读取。通过以上步骤和代码示例,你可以轻松实现一个1小时倒计时功能。
没有搜到相关的沙龙