你的心如利箭 在风中笔直的飞翔
github DNS ALEXA CDN
jquery JS CSS CSS3 HTML5 svg php --- isux w3cplus

21270

  博客园  :: 首页  ::  ::  ::  :: 管理

 http://www.w3school.com.cn/jsref/jsref_obj_date.asp  时间函数

 

 

60秒倒计时定时器: (把下面的简化了一下)  2016-3-15

<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var mobileHouse={
    mz:0,
    init:function(){
        if(mobileHouse.mz>0){console.log('定时器还在运行中,稍后执行');return false;}
        var timer=setInterval(function(){

                    if(mobileHouse.mz>=60){
                        $("#button").removeClass("gray");
                        $("#button").val("获取验证码");
                        mobileHouse.mz=0;
                        clearInterval(timer);//删掉定时器
                    }else{
                        $("#button").val(  60-mobileHouse.mz +"秒后再发");
                        console.log(mobileHouse.mz);
                        mobileHouse.mz++;
                    }
            },1000);//延时执行
    },

}
    $("#button").click(function(){
        mobileHouse.init();
    });
});
</script>
<input type="button" value="" id="button">

 

 

 

 

一个例子: 发送验证码后,60秒倒计时。  2016-1-5

60秒到时间后才能再次重发(此期间如果页面被刷新,这招不管用)

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var firstTime=0;
    var timer;//定时器
    var mz=59;//秒针
    $("#button").click(function(){
        var curTime = (new Date()).getTime();
        if(firstTime==0 || curTime-firstTime>60000){
            firstTime = (new Date()).getTime();
            $("#button").addClass("gray");
            $("#button").val("60秒后再发");

            timer=setInterval(function(){
                var curTime = (new Date()).getTime();
                if(curTime-firstTime>=60000){
                    $("#button").removeClass("gray");
                    $("#button").val("获取验证码");
                    mz=59;
                    clearInterval(timer);//删掉定时器
                }else{
                    $("#button").val(mz+"秒后再发");
                    mz--;
                }
            },1000);//延时执行
        }else{
            console.log("不让点");
        }
    });
});
</script>
<style type="text/css">
#button{border:0;padding:5px 10px;}
.gray{background:#333;color:#aaa;}
</style>
<input type="button" value="获取验证码" id="button">

 

 

 

...

 

posted on 2016-01-05 18:13  bjhhh  阅读(215)  评论(0编辑  收藏  举报