js实现获取短信验证码倒计时

时间：2024-02-29 12:00:31
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #btn{
                width:80px;
                height: 30px;
                border:none;
                outline: none;
                cursor: pointer;
                background-color:cadetblue;
                color:#fff;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <input id="btn" onclick="huoqu(this)" value="点击获取" />
        <script type="text/javascript">
            var cnt=60;//定义一个全局变量 倒计时的时间
            function huoqu(obj){
                if(cnt==0){//当倒计时的时间为0时
                    obj.removeAttribute("disabled");
                    obj.value="点击获取";
                    cnt=60;
                    return;//当等于0时，要跳出这个函数，不然它会一直倒计时
                }else{
                    obj.setAttribute("disabled",true);
                    obj.value=cnt+\'s\';
                    console.log(cnt);
                    cnt--;
                }
                setTimeout(function(){
                        huoqu(obj);
                    },1000);
            }
            
        </script>
    </body>
</html>

 

相关文章