html设置验证码倒计时
时间: 2023-10-18 18:21:33 浏览: 42
可以使用 JavaScript 实现验证码倒计时,具体步骤如下:
1. 在 HTML 页面中添加一个按钮用于触发发送验证码的事件,并为其添加 id 属性,例如:
```html
<button id="send-code-btn">发送验证码</button>
```
2. 在 JavaScript 中获取该按钮元素,并为其添加点击事件监听器:
```javascript
var sendCodeBtn = document.getElementById('send-code-btn');
sendCodeBtn.addEventListener('click', function() {
// 在这里编写发送验证码的代码
});
```
3. 在点击事件处理函数中,先禁用按钮,然后设置一个定时器用于倒计时:
```javascript
var seconds = 60; // 倒计时秒数
sendCodeBtn.disabled = true; // 禁用按钮
sendCodeBtn.innerText = seconds + ' 秒后重新发送'; // 修改按钮文本
var countdown = setInterval(function() {
seconds--;
if (seconds === 0) {
clearInterval(countdown);
sendCodeBtn.disabled = false;
sendCodeBtn.innerText = '发送验证码';
} else {
sendCodeBtn.innerText = seconds + ' 秒后重新发送';
}
}, 1000);
```
完整代码如下:
```html
<button id="send-code-btn">发送验证码</button>
<script>
var sendCodeBtn = document.getElementById('send-code-btn');
sendCodeBtn.addEventListener('click', function() {
var seconds = 60;
sendCodeBtn.disabled = true;
sendCodeBtn.innerText = seconds + ' 秒后重新发送';
var countdown = setInterval(function() {
seconds--;
if (seconds === 0) {
clearInterval(countdown);
sendCodeBtn.disabled = false;
sendCodeBtn.innerText = '发送验证码';
} else {
sendCodeBtn.innerText = seconds + ' 秒后重新发送';
}
}, 1000);
});
</script>
```
这样就实现了一个简单的验证码倒计时功能。