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

  • 相关阅读:
    leetcode 1301. 最大得分的路径数目
    LeetCode 1306 跳跃游戏 III Jump Game III
    LeetCode 1302. 层数最深叶子节点的和 Deepest Leaves Sum
    LeetCode 1300. 转变数组后最接近目标值的数组和 Sum of Mutated Array Closest to Target
    LeetCode 1299. 将每个元素替换为右侧最大元素 Replace Elements with Greatest Element on Right Side
    acwing 239. 奇偶游戏 并查集
    acwing 238. 银河英雄传说 并查集
    acwing 237程序自动分析 并查集
    算法问题实战策略 MATCHORDER 贪心
    Linux 安装Redis全过程日志
  • 原文地址:https://www.cnblogs.com/shy0113/p/11910524.html
Copyright © 2020-2023  润新知