用JavaScript代码模仿发送验证码功能。效果要求如下(可实现功能 要求即可,不要求模仿参考图片样式): (1)点击“获取验证码”,弹出已发送验证码相应提示,获取验证码区域变为1 分钟倒计时。 (2)当倒计时为 0 时,“获取验证码”变为“重新发送验证码”。
时间: 2024-03-31 10:32:45 浏览: 12
以下是用 JavaScript 模拟发送验证码的代码:
HTML 代码:
```html
<div>
<label for="phone">手机号码:</label>
<input type="text" id="phone" />
<button id="getCodeBtn" onclick="getCode()">获取验证码</button>
</div>
```
JavaScript 代码:
```javascript
function getCode() {
var phone = document.getElementById("phone").value;
if (phone === "") {
alert("请输入手机号码!");
return;
}
var getCodeBtn = document.getElementById("getCodeBtn");
getCodeBtn.disabled = true;
var count = 60;
getCodeBtn.innerText = "已发送验证码";
var timer = setInterval(function() {
count--;
getCodeBtn.innerText = count + "秒后重新发送";
if (count === 0) {
clearInterval(timer);
getCodeBtn.innerText = "重新发送验证码";
getCodeBtn.disabled = false;
}
}, 1000);
// 在这里调用发送验证码的 API,并传递手机号码参数
// ...
}
```
代码说明:
1. 首先获取输入框中的手机号码。
2. 如果手机号码为空,则弹出提示并结束函数。
3. 禁用“获取验证码”按钮,并将按钮文本改为“已发送验证码”。
4. 设置倒计时为 60 秒,并且每秒更新一次倒计时文本。
5. 当倒计时结束时,清除定时器,将按钮文本改为“重新发送验证码”,并启用按钮。
6. 在函数中调用发送验证码的 API,将手机号码作为参数传递。