获取验证码倒计时优化页面刷新实时倒计时

最新推荐文章于 2022-09-02 11:44:47 发布

后端研发Marion

最新推荐文章于 2022-09-02 11:44:47 发布

阅读量924

点赞数

分类专栏：前端开发文章标签：手机验证码倒计时优化 javascript 网站注册

前端开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

原文链接：https://www.cnblogs.com/shueixue/p/5776965.html

实现刷新页面时，倒计时仍可正常显示，不清除记录。

思路：将当前时间记录在本地sessionStrage中，刷新时，比较当前时间和记录的时间，进行相应操作

jsp页面：

 
        <body> 
       
        <button id= 
        "getcode"  
        value= 
        "获取验证码" 
        >获取验证码</button> 
       
        </body> 
       
        <script type= 
        "text/javascript" 
        > 
       
        $( 
        function 
        () { 
       
        var  
        btn = document.getElementById( 
        "getcode" 
        ); 
       
        //调用监听 
       
        monitor($(btn)); 
       
        //点击click 
       
        btn.onclick =  
        function 
        () { 
       
        //倒计时效果  getCode回调函数  获取验证码api 
       
        countDown($( 
        this 
        ), getCode); 
       
        }; 
       
        function  
        getCode() { 
       
        alert( 
        "验证码发送成功" 
        ); 
       
        } 
       
        }); 
       
        </script>

　　js页面：

 
        //防止页面刷新倒计时失效 
       
        /** 
       
        * 
       
        * @param {Object} obj  获取验证码按钮 
       
        */ 
       
        function  
        monitor(obj) { 
       
        var  
        LocalDelay = getLocalDelay(); 
       
        if 
        (LocalDelay.time!= 
        null 
        ){ 
       
        var  
        timeLine = parseInt(( 
        new  
        Date().getTime() - LocalDelay.time) / 1000); 
       
        if  
        (timeLine > LocalDelay.delay) { 
       
        console.log( 
        "过期" 
        ); 
       
        }  
        else  
        { 
       
        _delay = LocalDelay.delay - timeLine; 
       
        obj.text(_delay+ 
        "秒后重新发送" 
        ); 
       
        document.getElementById( 
        "getcode" 
        ).disabled =  
        true 
        ; 
       
        var  
        timer = setInterval( 
        function 
        () { 
       
        if  
        (_delay > 1) { 
       
        _delay--; 
       
        obj.text(_delay+ 
        "秒后重新发送" 
        ); 
       
        setLocalDelay(_delay); 
       
        }  
        else  
        { 
       
        clearInterval(timer); 
       
        obj.text( 
        "获取验证码" 
        ); 
       
        document.getElementById( 
        "getcode" 
        ).disabled =  
        false 
        ; 
       
        } 
       
        }, 1000); 
       
        } 
       
        } 
       
        }; 
       
        //倒计时效果 
       
        /** 
       
        * 
       
        * @param {Object} obj 获取验证码按钮 
       
        * @param {Function} callback  获取验证码接口函数 
       
        */ 
       
        function  
        countDown(obj, callback) { 
       
        if  
        (obj.text() ==  
        "获取验证码" 
        ) { 
       
        var  
        _delay = 60; 
       
        var  
        delay = _delay; 
       
        obj.text(_delay+ 
        "秒后重新发送" 
        ); 
       
        document.getElementById( 
        "getcode" 
        ).disabled =  
        true 
        ; 
       
        var  
        timer = setInterval( 
        function 
        () { 
       
        if  
        (delay > 1) { 
       
        delay--; 
       
        obj.html(delay+ 
        "秒后重新发送" 
        ); 
       
        setLocalDelay(delay); 
       
        }  
        else  
        { 
       
        clearInterval(timer); 
       
        obj.text( 
        "获取验证码" 
        ); 
       
        document.getElementById( 
        "getcode" 
        ).disabled =  
        false 
        ; 
       
        } 
       
        }, 1000); 
       
        callback(); 
       
        }  
        else  
        { 
       
        return  
        false 
        ; 
       
        } 
       
        } 
       
        //设置setLocalDelay 
       
        function  
        setLocalDelay(delay) { 
       
        //location.href作为页面的唯一标识，可能一个项目中会有很多页面需要获取验证码。 
       
        sessionStorage.setItem( 
        "delay_"  
        + location.href, delay); 
       
        sessionStorage.setItem( 
        "time_"  
        + location.href,  
        new  
        Date().getTime()); 
       
        } 
       
        //getLocalDelay() 
       
        function  
        getLocalDelay() { 
       
        var  
        LocalDelay = {}; 
       
        LocalDelay.delay = sessionStorage.getItem( 
        "delay_"  
        + location.href); 
       
        LocalDelay.time = sessionStorage.getItem( 
        "time_"  
        + location.href); 
       
        return  
        LocalDelay; 
       
        }<br><br>