验证码案例
题目
html部分
<input type="number" id="number"">
<button>发送</button>
<input type="button" onclick="validateCode()" value="确定" />
//点击时调用函数validateCode()
js部分
var btn = document.querySelector('button');
var time = 60;
//设置字面量
btn.addEventListener('click', function () {
btn.disabled = true;
//使其disabled变成true即当点击时禁用
var timer = setInterval(function () {
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 60;
//当时间为0时，计时器清除禁用取消
} else {
btn.innerHTML = '还剩' + time + '秒';
time--;
}
}, 1000)
//如果不是0的时候，时间会逐步减一
})
function validateCode()
{
//获取输入的验证码
var inputCode = document.getElementById("number").value;
console.log(inputCode);
if (inputCode.length <= 0)
{ //若没输入的时候点击按钮则会输入验证码
alert("请输入验证码！");
}
else if (inputCode!= "0505")
//将输入的与0505做比较
{
alert("验证码输入有误！");
}
else
{
alert("验证码正确！");
}
}
//若为0505则弹出小框"验证码正确！"，否则"验证码输入有误！"
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发送短信案例</title>
</head>
<body>
<input type="number" id="number">
<button>发送</button>
<input type="button" onclick="validateCode()" value="确定" />
<script>
var btn = document.querySelector('button');
var time = 60;
btn.addEventListener('click', function () {
btn.disabled = true;
var timer = setInterval(function () {
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 60;
} else {
btn.innerHTML = '还剩' + time + '秒';
time--;
}
}, 1000)
})
function validateCode()
{
//获取输入的验证码
var inputCode = document.getElementById("number").value;
console.log(inputCode);
if (inputCode.length <= 0)
{
alert("请输入验证码！");
}
else if (inputCode != "0505")
{
alert("验证码输入有误！");
}
else
{
alert("验证码正确！");
}
}
</script>
</body>
</html>
