zoukankan      html  css  js  c++  java
  • 防刷新倒计时(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>
  • 相关阅读:
    ios MD5大小写加密
    清理xcode缓存
    iOS 动画(基于Lottie封装)
    wkWebView 的一些问题
    ios 画板的使用
    redis安装和使用
    memcached 配置与安装
    mysql主从同步配置
    ansible playbook使用
    ubuntu18创建rc.local
  • 原文地址:https://www.cnblogs.com/-scl/p/7771771.html
Copyright © 2011-2022 走看看