Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Requirements:

Jqery realizes that the mask layer is displayed between valid dates, and the close button is hidden outside the valid date. The mask layer is always on the home page, and will still be displayed if you refresh and re-enter the home page after closing

Ideas:

Set the start time and end time to compare with the current timestamp. If the mask layer is displayed within the current time, hide it otherwise. This can be done by, for example, listening on elements.

Code:

HTML:

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

js:

Function closeMask() {var mask_bg = document.getelementByid ("mask-container"); mask_bg.style.display = "none"; } $(function() {const startT = "2021/10/01 00:00:00" 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"; } var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); }}); window.addEventListener('pagehide', function () { isPageHide = true; }); })Copy the code

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; }Copy the code

Supplement:

The small difficulty I encountered was that the refresh would not be triggered when IOS clicked back. I thought the time format did not match before, but it turned out that many students had encountered this problem online, which was also a pit. There is also the time stamp conversion can be changed according to the specific requirements of the format