获取验证码倒计时

Posted 2020-09-18 蔡春保

　　做到有关用户注册的时候，会遇到获取验证码的时候，验证码会有一个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);