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

I made this welcome feature using HTML and CSS, which I want to display at intervals.

--------------------------- What I want to achieve ---------------------------

First, this feature should be executed once (the moment a user opens this page on a browser).

Then, after every 8 Hours (even if the page is reloaded), the feature is executed again.

this is my welcome message here:

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;
    }
}

Please help me achieve this. Thank you :)

CodePudding user response：

Technically speaking, this is only possible with persistent storage, since you're expecting it to run even if the page is refreshed.

You'd likely need to store the time when the user first visits the page, then retrieve the stored value when you need to check if it's been 8 hours.

This means you'd also have to use something like setInterval() to consistently pull in the first date, compare it to Date.now() and see if they're equal.

CodePudding user response：

The idea is to store the date in localStorage when the page was opened for the first time. Check if stored date doesn't exist or is older than 8 hours then display the message. If it's older than 8 hours, update stored date to a value that would indicate that message was displayed twice.

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/