javascript实现验证码倒计时
时间: 2023-11-29 14:03:41 浏览: 47
好的,以下是 JavaScript 实现验证码倒计时的代码:
HTML 代码:
```html
<button id="btn">获取验证码</button>
```
JavaScript 代码:
```javascript
var btn = document.getElementById('btn');
var count = 60; // 倒计时时间
var timer = null; // 定时器
btn.onclick = function() {
if (timer) {
return;
}
timer = setInterval(function() {
count--;
if (count <= 0) {
clearInterval(timer);
timer = null;
count = 60;
btn.innerHTML = '获取验证码';
btn.disabled = false;
} else {
btn.innerHTML = count + '秒后重新获取';
btn.disabled = true;
}
}, 1000);
};
```
以上代码实现了一个简单的验证码倒计时功能,点击按钮后会开始倒计时,倒计时结束后按钮会恢复原状。
相关问题
js 实现手机验证码倒计时
HTML:
```html
<button id="getCodeBtn" onclick="getCode()">获取验证码</button>
```
JS:
```javascript
function getCode() {
// 设置获取验证码按钮不可点击
var getCodeBtn = document.getElementById('getCodeBtn');
getCodeBtn.classList.add('disabled');
getCodeBtn.disabled = true;
// 设置倒计时
var count = 60;
var countdown = setInterval(function () {
getCodeBtn.innerHTML = count + '秒后重新获取';
count--;
if (count < 0) {
// 清除倒计时器
clearInterval(countdown);
getCodeBtn.innerHTML = '获取验证码';
getCodeBtn.classList.remove('disabled');
getCodeBtn.disabled = false;
}
}, 1000);
}
```
CSS:
```css
.disabled {
cursor: not-allowed;
opacity: 0.5;
}
```
html设置验证码倒计时
你可以使用 JavaScript 实现验证码倒计时,以下是一个简单的例子:
HTML 代码:
```html
<input type="text" id="captcha" placeholder="验证码">
<button id="captcha-btn" onclick="sendCaptcha()">获取验证码</button>
```
JavaScript 代码:
```javascript
var countdown = 60; // 倒计时时间
function sendCaptcha() {
var btn = document.getElementById('captcha-btn');
// 发送验证码的逻辑
// ...
// 开始倒计时
btn.disabled = true;
var timer = setInterval(function() {
if (countdown == 0) {
btn.disabled = false;
btn.innerHTML = "获取验证码";
countdown = 60;
clearInterval(timer);
} else {
btn.innerHTML = "重新发送(" + countdown + ")";
countdown--;
}
}, 1000);
}
```
这个例子中,点击按钮会触发 `sendCaptcha` 函数,发送验证码的逻辑可以在该函数中实现。同时,该函数会启动一个计时器,每秒更新按钮上的文本,直到倒计时结束。