jQuery实现按钮5秒后可以点击

废话少说,直接上代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>按钮5秒后可以点击</title>
        <script type="text/javascript" src="js/jquery.min.js">
        </script>
        <script >
            setTimeout(function(){
                $("button[name = 'btn']").removeAttr("disabled");
            },5000);
            
        </script>
    </head>
    <body>
        <div>
            <button name="btn" disabled>同意</button>
        </div>
    </body>
</html>

 

 

在按钮上实现倒计时效果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>按钮倒数5秒后才能点击</title>
    </head>
    <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
   <script src="js/jquery-2.1.1.min.js"></script>
   <body>
        <button type="button" id="test" disabled>点击(5)</button>
    </body>
    <script type="text/javascript">
        var i=5;
        var timehwnd=setInterval("Countdown()",1000);
        function Countdown(){
            i--;
            if(i == 0){
                $("button[id='test']").html("点击");
                $("button[id='test']").removeAttr("disabled");
                clearInterval(timehwnd);
            }else{
                $("button[id='test']").html("点击("+i+")");
            }
        }
    </script>
</html>

 

posted @ 2018-04-10 21:10  cheney-yang  阅读(2308)  评论(0编辑  收藏  举报