jquery遮罩层问题

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

需求:

jqery实现遮罩层在有效日期之间显示，有效日期之外、关闭按钮则隐藏，遮罩层一直在首页，关闭后如果刷新、再次进入首页仍会显示

思路:

设置开始时间，结束时间和当前时间戳进行比较，如果在当前时间内显示遮罩层，否则隐藏。可以通过监听元素等方法来实现。

代码:

html：

 <div id="mask-container">
      <img class="content" src="./images/img_guoqing.png" alt="" />
      <div onclick="closeMask()" />
 </div>

js:

    // 关闭遮罩层
     function closeMask() {
        var mask_bg = document.getElementById("mask-container");
        mask_bg.style.display = "none"; 
    }
    
    $(function() {
      const startT = "2021/10/01 00:00:00"//日期格式写成"/"是为了兼容ios
      const endT = "2021/10/08 00:00:00"
  
    if (
          Math.round(new Date()) >  Math.round(new Date(endT).getTime()) ||
          Math.round(new Date()) <  Math.round(new Date(startT).getTime())
    ){
          var mask_bg = document.getElementById("mask-container");
               mask_bg.style.display = "none"; 
     }
     
     //ios点击返回按钮时返回上一页时，刷新不会触发遮罩层
      var isPageHide = false; 
        window.addEventListener('pageshow', function () { 
        if (isPageHide) { 
          window.location.reload(); 
        } 
      }); 
      window.addEventListener('pagehide', function () { 
        isPageHide = true; 
      }); 

 })
    

css:

    #mask-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        filter: alpha(opacity=100);
        opacity: 1;
        display: block;
        z-index: 999;
    }
    #mask-container .content {
        display: block;
        width: 80%;
        margin: 70px auto 20px;
    }

补充:

遇到的小难点就是ios点击返回时不会触发刷新的问题，之前以为时间格式不匹配，结果发现网上不少同学都遇到这个问题，也算是踩坑了。还有就是时间戳转化这块可以根据具体要求格式作更改