我希望此消息在第一个运行之后每隔一段时间显示一次

Question

我使用 HTML 和 CSS 制作了这个受欢迎的功能，我想每隔一段时间显示一次。

----------------------------我要实现的目标------------ --------------

第一, 此功能应执行一次（用户在浏览器上打开此页面的那一刻）。

然后, 在每 8 小时 之后（即使重新加载页面），该功能再次执行。

这是我的欢迎信息：

HTML:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="../fontawesome-free-5.13.0-web/css/all.min.css" />
    <link rel="stylesheet" href="./style.css" />
    <title>greeting</title>
</head>

<body>
    <section id="welcome_greeting">
        <div id="welcome_greeting_inner">
            <div id="welcome_row_1">
                <div>hello</div>
                <div>world</div>
            </div>
            <div id="welcome_row_2">welcome</div>
            <div id="welcome_row_3">to</div>
            <div id="welcome_row_4">
                <div>
                    <p>our website</p>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section#welcome_greeting{
    padding: 0 20px;
    height: 100vh;
}

div#welcome_greeting_inner{
    font-family: 'Segoe UI';
    text-transform: capitalize;
}

div#welcome_greeting_inner div#welcome_row_1{
    font-size: 100px;
    display: flex;
    justify-content: space-evenly;
}

div#welcome_greeting_inner div#welcome_row_1 div:first-child{
    transform: translateY(-500px);
    opacity: 0;
    visibility: hidden;
    animation: rowOneA 2000ms ease 100ms forwards;
}

@keyframes rowOneA{
    100%{
        transform: translateY(0px);
        opacity: 1;
        visibility: visible;
    }
}

div#welcome_greeting_inner div#welcome_row_1 div:last-child{
    transform: translateY(-500px);
    opacity: 0;
    visibility: hidden;
    animation: rowOneB 2000ms ease 700ms forwards;
}

@keyframes rowOneB{
    100%{
        transform: translateY(0px);
        opacity: 1;
        visibility: visible;
    }
}

div#welcome_greeting_inner div#welcome_row_2{
    font-size: 120px;
    display: flex;
    justify-content: space-evenly;
    transform: rotateX(90deg);
    opacity: 0;
    visibility: hidden;
    animation: rowTwo 5000ms ease 1600ms forwards;
}

@keyframes rowTwo{
    100%{
        transform: rotateX(0deg);
        opacity: 1;
        visibility: visible;
    }
}

div#welcome_greeting_inner div#welcome_row_3{
    font-size: 100px;
    display: flex;
    justify-content: space-evenly;
    opacity: 0;
    visibility: hidden;
    animation: rowThree 6750ms ease 2600ms forwards;
}

@keyframes rowThree{
    100%{
        opacity: 1;
        visibility: visible;
    }
}

div#welcome_greeting_inner div#welcome_row_4{
    font-size: 160px;
    display: flex;
    justify-content: space-evenly;
}

div#welcome_greeting_inner div#welcome_row_4 > div > p{
    width: 0;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    overflow: hidden;
    animation: rowFour 6000ms ease 3300ms forwards;
}

@keyframes rowFour{
    100%{
        width: 100%;
        opacity: 1;
        visibility: visible;
    }
}

请帮我实现这个。谢谢:)

Answer 1

从技术上讲，这只有在持久存储中才有可能，因为您希望它运行即使页面已刷新。

您可能需要存储用户首次访问页面的时间，然后在需要检查是否已经 8 小时时检索存储的值。

这意味着您还必须使用 setInterval() 之类的东西来始终如一地拉入第一次约会，将其与 Date.now() 进行比较，看看它们是否相等。

Answer 2

想法是将页面第一次打开时的日期存储在localStorage中。检查存储日期是否不存在或早于 8 小时，然后显示消息。如果超过 8 小时，将存储日期更新为一个值，该值将指示该消息已显示两次。

let showWelcome = localStorage.getItem("welcomeMessage"),
    showWelcomeTime = new Date().getTime(), //store timestamp when page was opened, we'll use it for calculation when to display second message
    showWelcomeTimeout = 60*60*8;// 8 hours delay

showWelcomeCheck();


function showWelcomeCheck()
{
  const now = new Date().getTime();
  if (showWelcome === null) // is page opened for the first time?
  {
    //first time opened page
    //show the message
    welcome_greeting.classList.remove("hidden");
    //save current date in localStorage
    showWelcomeSave();
    //start countdown for the next message
     showWelcomeTimer(now - showWelcomeTime + showWelcomeTimeout);
  }
  else //page has been opened before
  {
    showWelcome = +showWelcome; //string to integer
    //animation has been shown before, check if we need to run it again
    if (showWelcome) //was it shown once?
    {
      //continue countdown for the next message
      showWelcomeTimer((now - showWelcomeTime) - (now - showWelcome) + showWelcomeTimeout);
    }
  }
}

function showWelcomeSave()
{
  const now = new Date().getTime();
  showWelcome = showWelcome === null ? now : 0;
  //store current date or 0 in localStorage
  localStorage.setItem("welcomeMessage", showWelcome);


  //for the demo purpose, hide the message after 10 sec
  setTimeout(e => welcome_greeting.classList.add("hidden"), 10000);

}

function showWelcomeTimer(when)
{
  const loop = timestamp =>
  {
    if (timestamp < when)
      return requestAnimationFrame(loop);

    // show message second and final time
    welcome_greeting.classList.remove("hidden");
    showWelcomeSave();
  }
  loop(0);
}

https://jsfiddle.net/4ahgkeb9/

我希望此消息在第一个运行之后每隔一段时间显示一次

I want this message to be shown at intervals after first run

html

javascript

css

animation

我希望此消息在第一个 运行 之后每隔一段时间显示一次

I want this message to be shown at intervals after first run

html

javascript

css

animation

我希望此消息在第一个运行之后每隔一段时间显示一次