实现页面关闭倒计时刷新,增加按键可以随时取消倒计时
时间: 2024-05-08 21:22:26 浏览: 15
可以使用JavaScript来实现页面关闭倒计时刷新和按键取消倒计时的功能。下面是一个简单的示例代码:
HTML部分:
```html
<p>页面将在<span id="countdown">10</span>秒后刷新</p>
<button id="cancel">取消</button>
```
JavaScript部分:
```javascript
var countdown = 10;
var timer = setInterval(function() {
countdown--;
document.getElementById("countdown").innerText = countdown;
if (countdown <= 0) {
clearInterval(timer);
location.reload();
}
}, 1000);
document.getElementById("cancel").addEventListener("click", function() {
clearInterval(timer);
});
```
解释一下上面的代码:
1. 首先定义了一个计时器变量 `timer` 和一个倒计时变量 `countdown`,初始值为10秒。
2. 使用 `setInterval` 函数每隔1秒更新一次页面上的倒计时数值,并检查是否已经到达0秒。
3. 如果倒计时数值已经为0,停止计时器并刷新页面。
4. 给取消按钮添加一个点击事件监听器,当用户点击按钮时,停止计时器。
这样就实现了页面关闭倒计时刷新和按键取消倒计时的功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)