前端如何设置一天只能点击一次的以及如何去判断第二天0点刷新的一些问题

Posted 2020-11-22 shy0113

当需要在前端去判断一天只能点击一次，第二天0点重置的时候，该如何去解决呢？

一、首先你需要获取第二天0点的时间，目前我的方法有两种

1.原生

         var time= new Date();
         time.setDate(t.getDate() + 1);
         time.setHours(0);
         time.setMinutes(0);
         time.setSeconds(0);
         console.log(t.getTime())    //第二天0点以毫秒为单位的时间

2.引入moment.js

        var t = moment().format(‘x‘)//当前点击时间
        var nextDate = moment().add(1, ‘days‘).hours(0).minutes(0).seconds(0).format(‘x‘)//新一天的时间    

二、使用localStorage或者cookie去存储一些数据设置过期时间为（第二天0点的时间 - 第一次点击的时间）

 这里我用到的是localStorage，由于localStorage原型上自带的属性方法里没有设置过期时间，需要自己封装两个方法用来存和取

         Storage.prototype.setExpire = (key, value, expire) => {  //设置存
            let obj = {
                data: value,           //要存的信息
                time: moment().format(‘x‘),  //第一次的点击时间
                expire: expire   //过期时间
            };
            localStorage.setItem(key, JSON.stringify(obj));  //以字符串的形式存到localStorage中
        }

        Storage.prototype.getExpire = key => {  //设置取
            let val = localStorage.getItem(key);   //取
            if (!val) {
                return val;
            }
            val = JSON.parse(val);  //将字符串转化成对象
           
            if (moment().format(‘x‘)-val.time > val.expire) {  //如果当前时间 - 第一次的时间 > 过期时间
                clearInterval(begin)   //清定时器
                localStorage.removeItem(key);  //移除localStorage
                /*
                  还可以去改变一些状态值的true或false
               */
                return null;     //返回空
            }else{
               /*
                  还可以去改变一些状态值的true或false
               */
                return val.data; //返回存的值
            }
            

        }
        localStorage.setExpire("token", ‘*********‘,nextDate-t) //存
        
       var begin =window.setInterval(()=>{   //取
            localStorage.getExpire("token")  //每一秒获取一次localStorage
        },1000)
        
    }                 

注意：前端去控制一天只能点击一次第二天0点刷新，签到的问题是很不好完善的，因为localStorage你可以从浏览器中删掉，存储的按钮状态或者其他的信息就没了，你又可以重新操作了，最好的方法还是后端去判断，然后返给你一个状态，你根据状态去判断按钮的状态