模仿发送验证码禁用button按钮

最新推荐文章于 2023-03-23 20:23:59 发布

cvdalao

最新推荐文章于 2023-03-23 20:23:59 发布

阅读量88

点赞数 1

本文链接：https://blog.csdn.net/cvdalao/article/details/125752201

版权

javascript

obut.setAttribute("disabled", "disabled"); // 禁用
obut.removeAttribute("disabled");       // 开启



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>发送验证码</button>
    <script>
        // 1.获取元素
        var oBtn = document.querySelector("button");
        // 2.添加点击事件
        oBtn.onclick = function () { //立马禁用 开启定时器
            var n = 5;
            // 为了解决延迟一秒的问题  可以提前调用auto函数
            auto();
            oBtn.setAttribute("disabled", "disabled")
            // 开启定时器
            var timer = setInterval(auto, 1000)
            function auto() {
                n--;
                console.log(n);
                oBtn.innerHTML = n + "秒之后重新获取";
                if (n <= 0) { //停止定时器  启动button按钮 改变文本内容
                    clearInterval(timer);
                    oBtn.removeAttribute("disabled");
                    oBtn.innerHTML = "发送验证码";
                    n = 5;
                }
            }
        }
    </script>
</body>

</html>