JavaScript网页制作--10秒后再次获取验证码

小灰灰 2022-12-25 11:59 139阅读 0赞

# JavaScript网页制作–10秒后再次获取验证码 #

通常在注册或者登陆页面时，都会需要短信验证码，在点击按钮获取验证码后会有一段时间无法点击按钮，避免短时间内大量的获取验证码。今天制作这样一个功能。

功能实现：

1.  点击获取验证码后禁用按钮
2.  按钮中的文字内容改变，每一秒都改变
3.  按钮倒计时变为0时恢复按钮，改回文字，重置倒计时t

代码实现：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>再次获取验证码</title>
    </head>
    <body>
        <input type="text">
        <button>获取验证码</button>
        <script>
            var btn = document.querySelector('button');
            var t = 10;
      
           //设置监听事件，按下按钮后禁用按钮
            btn.addEventListener('click',function(){
         
                btn.disabled = true;
                //添加定时器，时间间隔为一秒
                var time = setInterval(function(){
         
                    if(t==0){
         //如果倒计时等于0了，清除计时器，恢复按钮，将t重置为10，否则按钮中文字改变，t递减。
                        clearInterval(time);
                        btn.disabled=false;
                        btn.innerHTML='获取验证码';
                        t=10;
                    }else{
         
                    btn.innerHTML='您可以在'+t+'秒后再次获取';
                    t--;
                    }
                }, 1000);
                
            })
        </script>
    </body>
    </html>

页面预加载后出现获取验证码的按钮

![在这里插入图片描述][20201201210816989.png_pic_center]

按下获取验证码的按钮后，按钮禁用，倒计时，计时结束后恢复

![在这里插入图片描述][20201201210838353.png_pic_center]

--------------------

这个程序看起来不是很难，但是在自己写的时候对于刚接触语言的同学们来说，逻辑的实现还是得好好想一想。

[20201201210816989.png_pic_center]: /images/20221120/86f0a1b259804e3e870107265609d931.png
[20201201210838353.png_pic_center]: /images/20221120/67e1f850e2e14c11af959813a1ef0857.png