JS简单—点击按钮后，按钮变为不可选择状态，倒计时结束后按钮重新可点击。（获取验证码按钮）

最新推荐文章于 2022-05-07 19:24:24 发布

m0_蕪苚

最新推荐文章于 2022-05-07 19:24:24 发布

阅读量1.1k

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/m0_56172370/article/details/115982836

版权

HTML JavaScript 倒计时按钮交互页面动态更新

关键词由CSDN通过智能技术生成

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <input type="button" name="" id="get" value="获取" onclick="getting()" />
        <span id="a"></span>
        
        <script>
            
            var load = false

            function getting() {
                
                if (!load) {
                    
                    var num = 60  //倒计时为60秒
                    document.getElementById('get').disabled = true
                    document.getElementById('get').value = "获取中"                                  //将按钮内的文字变为获取中
                    document.getElementById('a').innerText = num + "秒后重获验证码"      //显示验证码
                    
                    var codeTimer = setInterval(function() {
                        
                        if (num == 1) {
                            clearInterval(codeTimer)   
                            document.getElementById('a').innerText = ""
                            document.getElementById('get').disabled = false
                            document.getElementById('get').value = "获取"
                        } else {
                            num--
                            document.getElementById('a').innerText = num + "秒后重获验证码"
                        }
                    }, 1000)                                //倒计时
                }
            }
        </script>

    </body>
</html>