用HTML+css+js写一个发送验证码功能
时间: 2024-01-13 12:03:20 浏览: 47
好的,以下是一个简单的示例代码:
HTML代码:
```html
<form>
<label for="phone">手机号:</label>
<input type="tel" id="phone" name="phone" placeholder="请输入手机号">
<button type="button" id="send-code">发送验证码</button>
</form>
```
CSS代码:
```css
input[type="tel"] {
width: 200px;
padding: 5px;
margin-right: 10px;
}
button {
padding: 5px 10px;
background-color: #0099ff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
```
JavaScript代码:
```javascript
// 获取DOM元素
const phoneInput = document.getElementById('phone');
const sendCodeBtn = document.getElementById('send-code');
// 发送验证码函数
function sendCode() {
// 获取手机号
const phone = phoneInput.value.trim();
// 判断手机号是否为空
if (!phone) {
alert('请输入手机号');
return;
}
// TODO: 发送验证码请求
console.log(`向 ${phone} 发送验证码...`);
// 模拟发送验证码的过程
sendCodeBtn.disabled = true;
setTimeout(() => {
sendCodeBtn.disabled = false;
}, 5000);
}
// 绑定发送验证码按钮的点击事件
sendCodeBtn.addEventListener('click', sendCode);
```
以上代码实现了一个简单的发送验证码功能,点击发送验证码按钮会在控制台输出向对应手机号发送验证码的信息,并且在按钮点击后 5 秒内禁用按钮,模拟了发送验证码的过程。你可以在 TODO 部分实现具体的发送验证码请求。