点击登录后10秒倒计时,中间刷新页面倒计时继续走,按钮不可以点,在10秒之内倒计时不会重新执行,超过10秒继续执行。js实现
时间: 2023-11-18 10:04:12 浏览: 66
点击实现倒计时,按钮变成不可点击,倒计时结束,按钮重新可点击
可以使用 `setTimeout` 和 `clearTimeout`函数实现这个功能。具体实现方式如下:
HTML 代码:
```html
<button id="login-btn">登录</button>
```
JavaScript 代码:
```javascript
var timer; // 定义计时器变量
function disableButton() {
document.getElementById('login-btn').disabled = true; // 禁用按钮
var count = 10; // 设置倒计时时间
timer = setTimeout(function() {
if(count > 0) {
document.getElementById('login-btn').innerText = '登录(' + count + ')';
count--;
timer = setTimeout(arguments.callee, 1000); // 继续执行倒计时
} else {
document.getElementById('login-btn').innerText = '登录';
document.getElementById('login-btn').disabled = false; // 启用按钮
}
}, 1000);
}
document.getElementById('login-btn').addEventListener('click', function() {
disableButton();
});
// 如果需要在中途刷新页面时继续执行倒计时,可以在页面加载时检查计时器变量是否存在,如果存在则继续执行倒计时
if(timer) {
disableButton();
}
```
上述代码中,`disableButton` 函数用于禁用按钮并开始倒计时。在倒计时过程中,每一秒钟更新按钮的文本和倒计时时间,并且检查是否已经到达倒计时结束时间,如果到达则启用按钮。在点击按钮后,调用 `disableButton` 函数开始倒计时。如果在倒计时过程中刷新了页面,可以检查计时器变量是否存在,如果存在则继续执行倒计时。
阅读全文