点击倒计时特效 

<html>
<script charset="utf-8" src="/js/jquery-2.1.1.min.js"></script>
<script>
    $(function(){
        //获取手机验证码倒计时效果
        var wait=2;
        var o=document.getElementById("k_countdown");
        if(o == null){
            return;
        }else{
        function time(o) {
                if (wait == 0) {
                    o.removeAttribute("disabled");  
                    //获取点击事件的value值
                    o.value="点击进行倒计";
                    o.style.background='#ffb311';
                    wait = 2;
                } else {
                    o.setAttribute("disabled", true);
                    o.value="重新发送(" + wait + ")";
                    o.style.background='#ccc';
                    wait--;
                    setTimeout(function() {
                        time(o)
                    },
                    1000)
                }
            }
        }
       
        $("#k_countdown").click(function(){
            time(o);
        });
    });
</script>
<style style="text/css">
    .k_border{
        border:1px solid #ccc;
        background:#ffb311 none repeat scroll 0 0 ;
        cursor: pointer ;
    }
</style>
<body>
<input id="k_countdown" class="k_border" value="点击进行倒计" wait_time="2"/>

</body>
</html>

 

posted on 2016-11-26 15:41  爱吃柠檬不加糖  阅读(233)  评论(0)    收藏  举报

导航