JavaScript案例：用户注册获取验证码(60s倒计时)

苦瓜柠檬茶.

于 2022-08-26 11:30:42 发布

阅读量606

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/lyq0011/article/details/126539945

版权

html代码：

<div id="form">
    <h2>用户注册</h2>
    手机号码: <input type="text"><br>
    验证码: <input type="text" id="inp"> <input type="button" id="btn" value="获取验证码">
        <input type="button" value="注册">
</div>

js代码：

 <script>
     var btn = document.getElementById("btn");//获取元素
     // 注意:定时器触发多次,导致定时器叠加,导致内存占满，所以需要disabled
     // disabled 在定时器触发过程中，禁止按钮点击
     btn.onclick = function(){
         this.disabled = true;//禁止按钮点击
         // 定时器
         var a = 60;
         var setclear = setInterval(function(){
             btn.value = "重发验证("+ a +"s)";
             a--;
             if(a <= 0){
                clearInterval(setclear);//清除定时器
                btn.value = "获取验证码"
                btn.disabled = false;
                }

            },1000)
      }
 </script>