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

当需要在前端去判断一天只能点击一次,第二天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你可以从浏览器中删掉,存储的按钮状态或者其他的信息就没了,你又可以重新操作了,最好的方法还是后端去判断,然后返给你一个状态,你根据状态去判断按钮的状态

 

posted @ 2019-11-22 11:25  SHY13  阅读(2522)  评论(0编辑  收藏  举报