用JavaScript代码模仿发送验证码功能。效果要求如下: (1)点击“获取验证码”,弹出已发送验证码相应提示,获取验证码区域变为1 分钟倒计时。 (2)当倒计时为 0 时,“获取验证码”变为“重新发送验证码”。
时间: 2024-03-31 12:32:41 浏览: 61
好的,这是一个比较常见的功能,可以用 JavaScript 代码来实现。以下是一个简单的实现方式:
HTML 代码:
```html
<button id="get-verify-btn">获取验证码</button>
```
JavaScript 代码:
```javascript
var verifyBtn = document.getElementById('get-verify-btn');
var countDown = 60; // 倒计时时长(秒)
var countdownTimer; // 倒计时计时器
function sendVerifyCode() {
// 模拟发送验证码的操作
alert('已发送验证码,请注意查收!');
}
function updateCountdown() {
if (countDown > 0) {
verifyBtn.innerHTML = countDown + ' 秒后重新发送';
countDown--;
} else {
clearInterval(countdownTimer);
verifyBtn.innerHTML = '重新发送验证码';
verifyBtn.disabled = false;
}
}
verifyBtn.onclick = function() {
sendVerifyCode();
verifyBtn.disabled = true;
countDown = 60;
updateCountdown();
countdownTimer = setInterval(updateCountdown, 1000);
};
```
解释一下上面的代码:
首先,我们获取了页面中的“获取验证码”按钮,以及倒计时的时长和计时器变量。
然后,我们定义了两个函数:
- `sendVerifyCode()`:模拟发送验证码的操作,这里只是简单地弹出一个提示框。
- `updateCountdown()`:更新倒计时的函数。如果倒计时还没结束,就更新按钮上的文本和倒计时的时间;否则停止计时器,将按钮文本改为“重新发送验证码”,并且启用按钮。
最后,我们给“获取验证码”按钮绑定了一个点击事件,当点击按钮时,会依次执行以下操作:
- 调用 `sendVerifyCode()` 发送验证码。
- 禁用按钮,防止用户重复点击。
- 将倒计时重置为 60 秒。
- 启动计时器,每秒调用一次 `updateCountdown()` 更新倒计时。
阅读全文