js 验证码按钮

思路

//首先我们需要有一个开关来控制按钮点击有效性

//绑定一个点击事件

//判断开关的值 来判断下面的代码还要不要执行

//声明一个变量，进行逐秒递减 用来计时

//首次改变内容

//打开计时器

//实现内容逐秒递减

//判断用来计时的变量是否为零

//关闭计时器

//恢复原来的内容

//设定开关为开

<div id = "btn">请点击获取验证码</div>


<script>
        //设定一个开关  值为开
         var flg = true 
        //绑定一个点击事件
         btn.onclick = function(){
            //判断开关的值
            if(flg === false){
             /若为关代码将不会往下执行
              return
            }
            /若值为开，则把值设定为关
             flg = false
             //声明一个变量用来计时判断和逐步递减
             var time = 60
               //点击按钮后按钮里面的内容首次发生改变
             btn.innerHTML = `请${time}s后重试`
                //打开计时器
             var timer  =setInterval(function(){
                //实现内容逐秒递减
                time--
               btn.innerHTML =`请${time}s后重试`
                //判断变量是否已经递减为0
               if(time === 0 ){
                 //时间到了，关闭计时器
                clearInterval(timer)
                   //让按钮的显示内容恢复到未点击之前的内容
                btn.innerHTML = '请点击获取验证码'
                //并恢复按钮的功能
                flg =true
               }
             },1000)
             
         }
</script>

总结 这个思路就是使用一个开关开控制按钮绑定事件有效性，从而实现事件在运行中不被影响。
第一次点击按钮的后，开关将会关上，在计时未结束之前，再点击按钮将不会触发按钮的绑定事件。