<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="number">
<button>发送</button>
<script>
// 1.实现发送短信倒计时效果,要求如下:
// 1) 页面和功能都需要自己完成,如下:
// 2) 发送短信倒计时,15秒后清空文本框,按钮恢复到原始状态
// 3) 判断手机号码是否为空或者是手机号码是否不足11位
let int = document.querySelector('input')
let btn = document.querySelector('button')
let i = 15
btn.addEventListener('click', function () {
if (int.value.trim() == '' || int.value.trim().length < 11 || int.value.trim().length > 11) {
alert('请输入11位数的手机号')
} else {
let time = setInterval(function () {
if (i == 0) {
clearInterval(time)
btn.disabled = false
btn.innerHTML = '发送'
i = 15
int.value = ''
} else {
btn.innerHTML = i--
btn.disabled = true
int.value = ''
}
}, 1000)
}
}
)
</script>
</body>
</html>
JavaScript短信验证码案例+非空校验
最新推荐文章于 2021-12-04 11:57:29 发布