WEB小案例之JS实现验证码倒计时页面刷新或关闭，倒计时正常递减无影响

最新推荐文章于 2024-06-17 10:51:35 发布

愤怒的多啦A梦

最新推荐文章于 2024-06-17 10:51:35 发布

阅读量983

点赞数 1

分类专栏： WEB小案例

本文链接：https://blog.csdn.net/lk1848621002/article/details/103191108

版权

WEB小案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

很多网站登录或则注册时，都会做一个利用手机号获取验证码证明为本人操作的选项。当然为了网站的web网站安全和防止信息炸弹等恶意操作，都会对再次获取验证码做一个倒计时，一般都为60s。而正常情况下只需利用JS定时函数很容易实现，这种情况下用户一旦刷新页面，页面dom中我们定义的js变量都会初始化，造成倒计时中断，而且未等倒计时结束又能发送短信。

上面的那种清空就涉及到数据持久性的问题，当然关于解决数据持久性的方案很多，例如常见的将数据存储到常规数据库，缓存数据库，session,cooike,localStorage,本地文本文件中等等。既然涉及JS前端，而cookie和localStorage又是JS的内置存储数据对象，所以对于上面的情况利用这两个方案分别实现一次

思路：

1.将倒计时的总时间*1000+当前系统时间戳存储到cookie或者localStorage中

2.当页面刷新，或重加载时如果cookie或者localStorage存在读取其中存储的值

3.利用当（前时间戳-读取的时间戳）/1000 等于剩余计时秒数

缺点：当倒计时未结束时，用户手动删除了页面对应的cookie或者本地localStorage值时，再重新刷新页面

还是能够发送短信验证码。[不过对于这种情况，在调用后台接口时应该做二次验证，具体方案自行考究]

实现代码如下：

1.cookie实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>COOKIE实现页面倒计时刷新页面无影响</title>
</head>
<style>
    #tip{
        width:125px;
        height:25px;
    }

</style>
<body>
    <div><button id='tip'">获取验证码</button></div>
    
</body>
<script type="text/javascript">
    window.onload = function(){
        var tip = document.getElementById('tip');
        let ct = getCookie("codeTime");
        if(ct && ct !="" && ct !=null){
            tip.disabled = "true";           
            let d = new Date();
            //用(设置的cookie时间戳-系统当前时间)/1000=剩余时间秒数
            let sec = Math.round((ct-d.getTime())/1000);          
            countDown(tip,sec);
        }
    }
  
    tip.onclick = function(){
        let t = 60;
        setCookie('codeTime',t,t);
        countDown(tip,t);
    }

    //设置cookie,直接将失效时间设置为cookie的值
    //将倒计时的秒数+当前时间戳设置为cookie值和cookie的有效时间
    
    function setCookie(name,value,time){      
        let exp = new Date();
        let val = exp.getTime()+value*1000;
        exp.setTime(exp.getTime()+time*1000);
        document.cookie = name+'='+val+';expires='+exp.toGMTString();
    }

     /**
    * @param  name [string] 要获取cookie名
    * @return  如果存在则返回cookie的值，否则返回空   
    */
    function getCookie(name){
        //获取所有cookie并且以';'为分割符，分割为数组
        let cook = document.cookie.split(';');

        //用indexOf()函数需要判断name第一次存在分割字符串的
        //0位置需要拼接一个=，这样遍历时更精确
        let cname = name+'=';

        let len = cook.length;
        //循环数组
        for(let i=0;i<len;i++){
            let ck = cook[i].trim();
            //
            if(ck.indexOf(cname)==0){
                return (ck.split('=')[1]).trim();
                //return ck.substring(cname.length,ck.length)
            }
        }
        return '';
    }


    //倒计时
    function countDown(obj,num) {
        var tim = setInterval(function() {          
                num--;
                obj.disabled = "true";
                obj.innerHTML= num+'秒后失效';
                if(num <= 0 ) {
                    clearInterval(tim);
                    obj.disabled = "";
                    obj.innerHTML= '重新发送';
                }
            }, 1000) //每1000毫秒=1秒执行一次
    }

</script>

</html>

2.localStorage实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage实现页面倒计时刷新页面无影响</title>
</head>
<style>
    #tip{
        width:125px;
        height:25px;
    }

</style>


<body>
    <div><button id='tip'">获取验证码</button></div>
    
</body>
<script type="text/javascript">
    /**
     * 将倒计时总时间*1000+当前时间戳存入到客户端本地内存中 localStorage
     */
    window.onload = function(){
        var tip = document.getElementById('tip');
        if(get('codetime')){
            let ct = get('codetime'); 
            let num = Math.round((ct-new Date())/1000);
            if(num>0){
                tip.disabled = "true";                 
                countDown(tip,num);
            }
        }          
    }
  
    tip.onclick = function(){
        let t = 60;
        let st = new Date().getTime()+t*1000;
        set('codetime',st);
        countDown(tip,t);
    }

    //localStorage数据存取
    function set(name,val){
        localStorage.setItem(name, JSON.stringify(val));
    }

    //localStorage获取
    function get(name){
        return JSON.parse(localStorage.getItem(name));
    }

    //倒计时
    function countDown(obj,num) {
        var tim = setInterval(function() {          
                num--;
                obj.disabled = "true";
                obj.innerHTML= num+'秒后失效';
                if(num <= 0 ) {
                    clearInterval(tim);
                    obj.disabled = "";
                    obj.innerHTML= '重新发送';
                }
            }, 1000) //每1000毫秒=1秒执行一次
    }

</script>


</html>

愤怒的多啦A梦

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
WEB小案例之JS实现验证码倒计时页面刷新或关闭，倒计时正常递减无影响

很多网站登录或则注册时，都会做一个利用手机号获取验证码证明为本人操作的选项。当然为了网站的web网站安全和防止信息炸弹等恶意操作，都会对再次获取验证码做一个倒计时，一般都为60s。而正常情况下只需利用JS定时函数很容易实现，这种情况下用户一旦刷新页面，页面dom中我们定义的js变量都会初始化，造成倒计时中断，而且未等倒计时结束又能发送短信。上面的那种清空就涉及到数据持久性的问题，当然关于解决数...
复制链接

扫一扫

专栏目录