javascript - 第一次关闭div，10分钟后不会再出现

Question

这是这种情况：

1）我们需要有一个框（div），它只在用户滚动半页时显示。

2）我们希望盒子记住用户是否第一次关闭盒子。它不会在至少 10 分钟内再次显示给用户。

你能帮我吗，我做了一些代码，我可以关闭/隐藏框但是当我再次向下滚动时，它再次出现，框并没有真正消失。

帮我完成这个而不使用jquery，纯javascript

我的关闭框代码：

function hide()
{
    document.getElementById('popup').style.display = 'none';
};

向下滚动时我的显示框代码：

window.addEventListener("scroll",function()
{
    if (window.pageYOffset >= 800 )
    {
        document.getElementById('popup').style.display = "block";
    }
}, false);

如果你需要例如 html 代码：

<div id="popup" class="popup-container">
    <form action="#" class="popup-form">
    </form>
    <div class="popup-close">
        <span class="fa fa-close" onclick="hide()"></span>
    </div>
</div>

标签： javascript

Answer 1

let localStorage = {};
let minTimeDiffSeconds = 5;
// let minTimeDiffSeconds = 10 * 60;
window.addEventListener("scroll",function(){
    if(window.pageYOffset >= 800 ){
        let currentTimeSeconds = Math.round((new Date()).getTime() / 1000);
        //let timeLastClosed = localStorage.getItem('closedTime')
        let timeLastClosed = localStorage.closedTime;
        let timeDiffSeconds = currentTimeSeconds - timeLastClosed;
        if (timeDiffSeconds > minTimeDiffSeconds) {
            document.getElementById('popup').style.display = "block";
        }
    }
},false);
  
function hide() {
    let currentTimeSeconds = Math.round((new Date()).getTime() / 1000);
    //localStorage.setItem('closedTime', currentTimeSeconds);
    localStorage.closedTime = currentTimeSeconds;
    document.getElementById('popup').style.display = 'none';
};

.container {
    height: 2000px;
    width: 200px;
    position: relative;
}
.popup-container {
    position: fixed;
    top: 0;
}

<div class="container">
  <div>
       Permanent Content
  </div>
  <div id="popup" class="popup-container">   
      <form action="#" class="popup-form">
      </form>
      <div class="popup-close">
          <span class="fa fa-close" onclick="hide()">Popup</span>
      </div>
  </div>
</div>

您可以为此使用本地存储。当用户关闭它时存储时间戳，当用户滚动时，您检查是否已经过了足够的时间。如果是，则显示弹出窗口。Stackoverflow 不允许使用 localstorage，所以我创建了一个 localstorage 用于演示。您可以使用浏览器的本地存储，也可以按原样使用代码。

注意：对于片段，我将最短时间设置为 5 秒