如何用原生JS实现关闭订阅弹窗后10分钟内重载页面也不显示

实现逻辑 #

• 利用localStorage存储用户点击关闭按钮的时间戳
• 页面初始化时计算当前时间与存储的关闭时间的差值，小于10分钟则直接隐藏订阅面板
• 时间超过10分钟或无历史关闭记录时正常展示面板
• 点击关闭按钮时播放下滑动画，动画结束后移除元素并存储当前时间戳

原代码问题说明 #

• 时间差计算逻辑错误，括号位置不正确，导致判断条件无法触发
• 关闭时只存储了状态标识，没有同步存储关闭时间戳
• 未处理面板默认隐藏的样式初始化逻辑，符合展示条件时也不会显示面板
• 动画结束事件监听有重复绑定的问题

完整可运行JS代码 #

const newsletter = document.getElementById("newsletter_container");
const closeBtn = document.getElementById("close_btn");
// 10分钟对应的毫秒数
const HIDE_DURATION = 10 * 60 * 1000;

// 页面初始化时检查是否需要隐藏面板
const initNewsletter = () => {
  const closeTime = Number(localStorage.getItem('newsletter_close_time'));
  // 有存储的关闭时间，且距离现在不足10分钟，直接隐藏
  if (closeTime && Date.now() - closeTime < HIDE_DURATION) {
    newsletter.remove();
    return;
  }
  // 否则显示面板，修正默认样式里的display:none
  newsletter.style.display = 'block';
}

// 关闭按钮点击事件
closeBtn.addEventListener("click", () => {
  newsletter.classList.add("slide_down");
  // 监听动画结束事件，兼容webkit内核
  const onAnimationEnd = () => {
    newsletter.remove();
    // 存储当前关闭时间戳
    localStorage.setItem('newsletter_close_time', Date.now().toString());
  };
  newsletter.addEventListener("animationend", onAnimationEnd);
  newsletter.addEventListener("webkitAnimationEnd", onAnimationEnd);
});

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initNewsletter);

内容的提问来源于stack exchange，提问作者takmil