验证码点击获取按钮 开关变量

验证码点击获取按钮

按钮在点击前是 “点击获取验证码” 状态  点击后 经过5s可以再次点击获取 

1.获取 文本所在标签
2.给元素添加点击事件
3.通过点击事件实现从5s到0s后重新点击的效果  
(4s后重新获取  3s后重新获取  2s后重新获取  1s后重新获取 点击获取验证码)

// html  点击按钮
 <button>点击获取验证码</button>    

        var but = document.querySelector('button'); // 获取button标签

        but.onclick = function(){  // 给button标签添加点击事件
            var content = 5; // 定义时间初始值  => 事件从5s开始倒计时

            but.innerText = `${content} s后重新获取`; // 向页面渲染文本点击后的初始样式  =>  点击后 5s后重新获取
            // 定义计时器
            var time = setInterval(function(){  
                content--; // 让时间变量自减
                // 当时间为0时 倒计时器结束
                but.innerText = `${content} s后重新获取`;  // 向页面渲染自减后的文本  => 4s后重新获取  3s后重新获取  2s后重新获取  1s后重新获取 0s后重新获取
                // 判读 当时间自减为0 时  清除计时器  回到点击前
                if(content == 0){
                    but.innerText = `点击获取验证码`;  // 时间为0时 文本回到点击前
                    clearInterval(time);  // 清除及时器
                }

            },1000);  // 1s 执行一次
            // 弊端： 在点击后 再次点击会回到点击前  出现秒数跳转 多次执行
        }

验证码点击获取按钮优化

        var but = document.querySelector('button'); // 获取button标签

        var flag = true; // 定义开关变量
        but.onclick = function(){  // 给button标签添加点击事件
            if(!flag) return; //点击后不能再次点击 
            var content = 5; // 定义时间初始值  => 事件从5s开始倒计时

            but.innerText = `${content} s后重新获取`; // 向页面渲染文本点击后的初始样式  =>  点击后 5s后重新获取
            flag = false;  // 5秒结束后不能再次点击
            // 定义计时器
            var time = setInterval(function(){  
                content--; // 让时间变量自减  当时间为0时 倒计时器结束
                but.innerText = `${content} s后重新获取`;  // 向页面渲染自减后的文本  
                // => 4s后重新获取  3s后重新获取  2s后重新获取  1s后重新获取 0s后重新获取
                // 判读 当时间自减为0 时  清除计时器  回到点击前
                if(content == 0){
                    flag = true; // 当时间为0 时可以再次点击重新获取验证码
                    but.innerText = `点击获取验证码`;  // 时间为0时 文本回到点击前
                    clearInterval(time);  // 清除及时器
                }

            },1000);  // 1s 执行一次
        }

开关变量

开关变量：它就如同自己定义的普通变量一样，不过它的功能是用于判断后续代码是否可以重
新执, 它就如同一个开关，在合适的地方让代码块执行或停止执行，在上述案例中，点击过后
就不能再次点击 直到时间为0时才能再次点击就是用了此原理，在使用时把它看作一个开关即可，它的值为取反就关闭(即不执行)，相同就打开(即执行)