前端实现弹窗时间一天弹一次，且七天后不再弹

多加香菜!

已于 2023-10-24 12:01:50 修改

阅读量869

点赞数 2

文章标签：前端 vue 1024程序员节

于 2023-07-04 14:10:23 首次发布

本文链接：https://blog.csdn.net/qq_47244439/article/details/131530535

版权

关于两个条件的思路：

1.一天一次：获取此刻弹窗的时间，存储到本地。再获取当前时间戳与存储的弹窗时间相减，如果大于一天的时间戳则满足一天弹一次的条件，反之则不满足；（也可用toDateString()，用存储的日期直接与当前的日期进行比较，如果不相等则是今天未弹过，便可弹出公告再存储日期；两种方式根据需求来选择）

2.七天：获取指定时间的第七天时间戳和当前时间戳相比较，大于则满足七天内弹框，反之；

代码：

<scrpit>

data(){
    // 七天后的时间戳
    sevenDaysTime: '',
    // 控制公告弹框
     poupTime: uni.getStorageSync('poupTime') || '',
    // 判断今天是否弹出公告
     showCouponNew: false,
},

onLoad()=>{
        //1.页面加载 获取指定时间的第七天时间戳
            
         //日期的后7天日期
             var sevenDays = new Date('2023-06-16');
             sevenDays.setDate(sevenDays.getDate() + 7);
             console.log(sevenDays.getTime(), '指定日期的七天后的时间戳'); //1687478400000
             this.sevenDaysTime = sevenDays.getTime();

        //2.执行弹窗函数
        this.handleToast();

     },

   methods:{
        handleToast(){
           // new Date().getTime() - this.poupTime > 1000 * 60 * 60*24: 一天弹一次判断条件
           //new  Date().getTime() < this.sevenDaysTime: 七天后不弹判断条件
           if ((!this.poupTime || new Date().getTime() - this.poupTime > 1000 * 60 *60*24)&& new Date().getTime() < this.sevenDaysTime) {
                    // 显示弹窗相关操作
                    this.$refs.announce.show();
                    this.showCouponNew = false;
                     //存储当前弹窗的时间
                     uni.setStorageSync('poupTime', new Date().getTime());
                 } else {
                          this.showCouponNew = true;
                       }
                });
         }

    }

</script>

之前没做过这种需求记录一下实现代码；目前想到的方法就是这样，有更简洁的方法欢迎大佬提出！