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

  • 相关阅读:
    Swift实现单例
    UIViewContentMode说明
    打开或关闭Mac的隐藏文件的命令。
    struts2-2.3.20以上版本无法正常启动
    eclipse下导入jdk源码
    js 与css script
    eclipse导入jquery包后报错
    ${pageContext.request.contextPath} :JSP取得绝对路径方法
    小米暑期实习在线笔试2015-04-25
    android动态污点分析
  • 原文地址:https://www.cnblogs.com/shy0113/p/11910524.html
Copyright © 2011-2022 走看看