防刷新倒计时(1分钟倒计时)

1.有些页面需要做防刷新倒计时,如点击按钮发送验证码会出现倒计时,当刷新页面时,倒计时不能清零

<body onbeforeunload="onbeforeunload()">
    
    <input type="button" value="点击发送验证码" />
    <div style="color:red"><p>距离下次发送验证码还有:<span id="time"></span>s</p></div>
    <script type="text/javascript">
    
        var time = 60 ,//倒计时秒数
            localstroage = window.localStorage ,//获取本地存储对象
            t = localstroage.getItem("remainderTime") ; //得到保存在本地存储中的remainderTime的值
            
        //浏览器刷新的时候触发的方法    
        function onbeforeunload(){
            //如果开始时间不等于且不等于0,刷新的时候就把剩余倒计时的秒数保存到本地存储中,名字叫remainderTime
            if(time!=60&&time!=0){
                localstroage.setItem("remainderTime",time) ;
            }
        }
        //加载页面的时候,获取本地存储中的remainderTime值,有就说明刷新过,就把倒计时开始时间变为t
        if(t!=null){
            time = t ;
            $("#time").text(time) ;
            remainderTime() ;
        }
        
        function remainderTime(){
            timer = setInterval(function(){
                time -- ;
                $("#time").text(time) ;
                if(time==0){
                    //当秒数为0的时间就移除本地存储中的remainderTime值
                    localstroage.removeItem("remainderTime") ;
                    //清空定时器
                    clearInterval(timer) ;
                    time = 60 ;
                    $("input").attr("disabled",false) ;
                }
                
            },1000) ; 
        }
        //倒计时
        $("input").click(function(){
            $(this).attr("disabled",true) ;
            if(time!=60){
                return ;
            }
            remainderTime() ;
        }) ;
        
            
        
    </script>
</body>

 

posted @ 2017-11-02 13:16  孟夏草木长  阅读(674)  评论(0编辑  收藏  举报