1.发送按钮点击后,会被禁用;
2被点击后,按钮里面的内容会变化成1分钟的倒计时;
3.待发送按钮被触发后才可以点击提交按钮,需在验证码框里填写0505,用弹窗提示成功
html部分
验证码: <input type="number" id="number"> <button>发送</button>
<input type="button" onclick="validateCode()" value="确定" />
JS部分
var btn = document.querySelector('button');
var btn2 = document.querySelector("#tijiao");
var time = 60;
btn2.disabled = true;
// 定义剩下的秒数
btn.addEventListener('click', function() {
btn.disabled = true;
btn2.disabled = false;
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.toUpperCase() != "0505")
{
alert("验证码输入有误!");
}
else
{
alert("验证码正确!");
}
}
首先设置btn2.disabled = true;
点击发送,会解封btn2。
设置定时器
定义timer=60并且不断递减。如果变量为0则清除定时器,并且复原按钮初始状态,并且显示提交按钮
验证码正确