每天显示一次[保留]的次数

Question

我想创建一个<div></div>，以便通过刷新在一日中显示1或2次。我的意思是，如果人们在day（24 h）中刷新了我的网站9999次，他们将看到我的div 1或2次。我想在网站活动中使用这个div喜欢这个网站：this website is using this thing

当您关闭它时，您将无法再看到它

Answer 1

您可以将用户最后一次访问该页面的时间戳以及div出现的次数保存在localStorage中，将其命名为timesViewed。如果自上次保存的时间戳以来经过24小时，则清除变量timesViewed并重置为0。

这是一个示例，每5秒刷新一次Viewed。

localStorage.setItem('timesViewed', 0);

document.getElementById('button').addEventListener("click", () => {
  let lastTimeReset = localStorage.getItem('lastTimeReset');
  if (lastTimeReset === null) {
    localStorage.setItem('lastTimeReset', new Date());
  } else {
    lastTimeReset = new Date(lastTimeReset);
    lastTimeReset.setSeconds(lastTimeReset.getSeconds() + 5);
    let now = new Date();
    if (lastTimeReset < now) {
      localStorage.setItem('lastTimeReset', now);
      localStorage.setItem('timesViewed', 0);
    }
  }

  let timesViewed = Number(localStorage.getItem('timesViewed'));
  localStorage.setItem('timesViewed', timesViewed + 1);
  console.log(timesViewed);
});

<button id="button">Add Times Viewed</button>

它不会在堆栈溢出spinet上起作用，但会在jsFiddle上起作用：https://jsfiddle.net/c0rybtkm/

（堆栈溢出不允许访问localStorage）

Answer 2

给出类似HTML的代码：

<div id="surprise" class="hide">
    SOME TEXT HERE
    <button id="surprise-close" type="button">&times;</button>
</div>

此CSS：

.hide { display: none; }

如果满足此条件，您要做的就是显示元素（删除.hide）：

• 我们没有localStorage.surprise
• [+new Date() - localStorage.surprise大于delay毫秒：

(function Surprise() {

    const delay = 6 * 60 * 60 * 1000;     // millisec. (6 hours delay)
    const EL_div = document.querySelector("#surprise");
    const EL_btn = document.querySelector("#surprise-close");
    const LS = window.localStorage;
    const close = () => {
        EL_div.classList.add('hide');
        LS.surprise = +new Date();
    }
    if(!LS.surprise || +new Date() - LS.surprise > delay ) {
        EL_div.classList.remove('hide'); // Show it!
        EL_btn.addEventListener('click', close);
    }

}());

只需将delay设置为6小时，例如：delay = 6 * 60 * 60 * 1000 ;