html5+js实现发送验证码倒计时60秒限制
时间: 2023-09-06 13:08:51 浏览: 140
jQuery实现发送验证码并60秒倒计时功能
好的,这是一个比较常见的需求,我可以为您提供一个简单的实现方法。
首先,在 HTML 中添加一个按钮和一个显示倒计时的元素:
```html
<button id="send-btn">发送验证码</button>
<span id="countdown"></span>
```
接着,在 JavaScript 中定义一个倒计时函数和一个点击事件处理函数:
```javascript
function countdown() {
var seconds = 60;
var countdownInterval = setInterval(function() {
seconds--;
if (seconds <= 0) {
clearInterval(countdownInterval);
document.getElementById("send-btn").disabled = false;
document.getElementById("countdown").textContent = "";
} else {
document.getElementById("countdown").textContent = "(" + seconds + "秒)";
}
}, 1000);
}
document.getElementById("send-btn").addEventListener("click", function() {
this.disabled = true;
countdown();
});
```
当用户点击发送按钮时,按钮将被禁用,倒计时函数将被调用。在倒计时函数中,通过 `setInterval` 函数每隔一秒更新一次倒计时数字,并判断是否倒计时结束。当倒计时结束时,按钮将重新启用,倒计时数字将被清空。
这就是一个简单的发送验证码倒计时60秒限制的实现方法。
阅读全文