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