手机短信验证码倒计时js
时间: 2023-09-23 16:02:18 浏览: 45
以下是一个简单的实现手机短信验证码倒计时的 JavaScript 代码:
HTML:
```html
<button id="sms-btn" onclick="sendSms()">获取验证码</button>
```
JavaScript:
```javascript
var countdown = 60; // 倒计时时间
var smsBtn = document.getElementById("sms-btn"); // 获取验证码按钮
function sendSms() {
// 发送验证码逻辑
// ...
// 开始倒计时
setCountdown();
}
function setCountdown() {
if (countdown == 0) {
// 倒计时结束,重置按钮状态
smsBtn.removeAttribute("disabled");
smsBtn.innerText = "获取验证码";
countdown = 60;
} else {
// 更新按钮状态,继续倒计时
smsBtn.setAttribute("disabled", true);
smsBtn.innerText = countdown + "秒后重试";
countdown--;
setTimeout(function () {
setCountdown();
}, 1000);
}
}
```
这个代码中,我们通过 `setTimeout()` 函数来实现倒计时功能,每一秒钟更新一次按钮状态。同时,我们还使用了 `setAttribute()` 和 `removeAttribute()` 函数来控制按钮的可点击状态,以防止用户在倒计时期间重复发送验证码。