js随机验证码案例 用过的都说好！

需要实现的效果

        1.点击按钮显示  5秒后重新发送   4秒后重新发送  .....   同时禁用按钮

        2.5秒过后在p标签中显示随机生成的验证码

css代码如下

    <style>
        button {
            outline: none;
            background: orange;
            border: none;
        }
    </style>

body 代码如下

    <!-- 
        1.点击按钮显示  5秒后重新发送   4秒后重新发送  .....   同时禁用按钮
        2.5秒过后在p标签中显示随机生成的验证码
    -->
    <input type="text">
    <button>发送验证码</button>
    <p></p>

js代码如下 

 <script>
        let btn = document.querySelector('button');
        let p = document.querySelector('p');
        let n = 5;
        //  btn点击事件
        btn.onclick = function () {
            p.innerHTML = Captcha();
            this.innerText = `${n}秒后重新发送`;
            // 禁用按钮
            this.disabled = true;
            let timer = setInterval(function () {
                // 每次减1  然后把当前n的值赋给btn
                n--;
                btn.innerText = `${n}秒后重新发送`;
                // n==0的时候 回到原样
                if (n == 0) {
                    btn.innerText = '发送验证码';
                    btn.disabled = false;
                    clearInterval(timer);
                    n = 5;
                }
            }, 1000);
        }
        // 随机生成验证码
        function Captcha() {
            let str = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPORSTUVWXYZ';
            let s = '';
            for (let i = 0; i < 6; i++) {
                s += str[parseInt(Math.random() * str.length)];
            }
            return s;
        }
        console.log(Captcha());
    </script>

希望能够帮助到大家！ 如果能够解决你的困惑那就给我点个赞吧 谢谢！