js 倒计时54321
时间: 2023-09-29 19:07:31 浏览: 36
以下是一种实现方法:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>倒计时</title>
</head>
<body>
<div id="countdown"></div>
<script>
// 设置倒计时的总秒数
var totalSeconds = 5;
// 获取显示倒计时的元素
var countdownElement = document.getElementById("countdown");
// 定义更新倒计时的函数
function updateCountdown() {
// 计算剩余的小时、分钟、秒数
var hours = Math.floor(totalSeconds / 3600);
var minutes = Math.floor((totalSeconds - hours * 3600) / 60);
var seconds = totalSeconds - hours * 3600 - minutes * 60;
// 如果剩余时间为负数,则停止倒计时
if (totalSeconds < 0) {
clearInterval(intervalId);
countdownElement.innerHTML = "倒计时结束";
} else {
// 更新倒计时的显示
countdownElement.innerHTML =
hours + "时" + minutes + "分" + seconds + "秒";
}
// 每秒钟减少一秒钟
totalSeconds--;
}
// 更新倒计时的显示,每秒钟执行一次
var intervalId = setInterval(updateCountdown, 1000);
</script>
</body>
</html>
```
在上面的代码中,我们首先定义了要倒计时的总秒数 `totalSeconds`,然后获取了一个用于显示倒计时的元素 `countdownElement`。接下来,我们定义了一个 `updateCountdown` 函数,用于更新倒计时的显示。在这个函数中,我们首先计算剩余的小时、分钟、秒数,如果剩余时间为负数,则停止倒计时并显示倒计时结束的提示;否则,更新倒计时的显示,并每秒钟减少一秒钟。最后,在页面加载完成后,我们设置了一个每秒钟执行一次的定时器,用于调用 `updateCountdown` 函数更新倒计时的显示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)