js随机数验证码+倒计时

最新推荐文章于 2024-07-11 16:50:01 发布

南與

最新推荐文章于 2024-07-11 16:50:01 发布

阅读量132

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_42354164/article/details/121175111

版权

代码实现：点击按钮生成六位数的验证码，按钮开始60秒倒计时（期间按钮不可用）

<style>
    button{
        width: 100px;
        height: 25px;
    }
</style>

<body>
    <button>获取验证码</button>
    <p></p>
    <script>
        let btn = document.querySelector("button");
        let p = document.querySelector("p");
        p.style.display="inline";
        // 创建随机验证码函数
        function valicode() {
            let vali = "";
            let str = "023456789ABCDEFabcdef";
            for (let i = 0; i < 6; i++) {
                let index = Math.floor(Math.random() * str.length);
                vali += str[index];
            }
            return vali;
        }
        btn.addEventListener("click", function () {
            let num = 60;
            btn.innerHTML = num;
            btn.disabled = true;
            p.innerHTML = valicode();
            let time = setInterval(function () {
                num--;
                btn.innerHTML = num;
                if (num < 1) {
                    clearInterval(time);
                    btn.disabled = false;
                    btn.innerHTML = "获取验证码";
                    return;   //读秒结束，数字还原为“获取验证码”，按钮解禁
                }
            }, 1000)
        })
    </script>
</body>

南與

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js随机数验证码+倒计时

代码实现：点击按钮生成六位数的验证码，按钮开始60秒倒计时（期间按钮不可用）<style> button{ width: 100px; height: 25px; }</style><body> <button>获取验证码</button> <p></p> <script> let btn = document.q
复制链接

扫一扫