获取验证码倒计时
做到有关用户注册的时候,会遇到获取验证码的时候,验证码会有一个60s的倒计时,工作中写了一个原生js代码。
html
<span id="get_code">获取验证码</span>
js
function handle_code(){ window.get_code.removeEventListener("click", handle_code, false); //按钮点击之后,移除点击事件 var time_num = 60; //倒计时的时间 //请求接口部分 //请求成功 window.get_code.classList.add('code_active'); //倒计时的时候,需要显示的样式 window.get_code.innerHTML = '60秒后重新发送'; code_interval = setInterval(function(){ //倒计时的函数 time_num = time_num - 1; if(time_num == 0){ window.clearInterval(code_interval); window.get_code.innerHTML = '获取验证码'; window.get_code.classList.remove('code_active'); window.get_code.addEventListener("click", handle_code, false); //如果倒计时结束,在添加上点击事件 }else{ window.get_code.innerHTML = time_num+'秒后重新发送'; } },1000); //请求失败弹出请求失败的信息 } window.get_code.addEventListener("click", handle_code, false);