验证码倒计时

html:

   <button>发送验证码</button>

javascript:

 <script>
        /* 
            可用: 没有disabled
            不可用: disabled

            点击按钮后, 按钮变成不可用, 开启定时器, 开始倒计时, 当倒计时结束变成0的时候  按钮变回可用状态
        */
        var btn = document.querySelector('button');
        console.log((btn));

        var t = null;

        // 点击按钮后
        btn.onclick = function () {
            // 生成验证码
            var code = randomCode(4);
            console.log(code);
            // 按钮变成不可用
            btn.disabled = true;

            // 设置倒计时时间
            var n = 5;
            // 解决1s
            btn.innerHTML = n + 's后重新获取';

            // 开始计时
            t = setInterval(function () {
                // 更新n
                n--;
                // 判断n是否到0
                if (n == 0) {
                    // 清除定时器
                    clearInterval(t);
                    // 按钮变成可以点击 去掉disabled
                    btn.removeAttribute('disabled');
                    // 更新文字
                    btn.innerHTML = '发送验证码';
                    // 结束函数
                    return;
                }

                btn.innerHTML = n + 's后重新获取';

            }, 1000);
        };
        // 生成num位随机验证码
        function randomCode(num) {
            // 4.2 生成随机验证码
            var str = '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';
            // 4.3 空字符
            var s = '';
            // 1-4
            for (var i = 1; i <= num; i++) {
                var n = Math.floor(Math.random() * str.length);
                s += str[n];
            }

            // 设置返回值
            return s;
        }
    </script>

效果：