我使用 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;
}
}
請幫助我實作這一目標。謝謝 ：）
uj5u.com熱心網友回復：
從技術上講，這只有在持久存盤中才有可能，因為即使頁面被重繪 ，您也希望它能夠運行。
您可能需要存盤用戶首次訪問頁面的時間，然后在需要檢查是否為 8 小時時檢索存盤的值。
這意味著您還必須使用類似的東西setInterval()來始終如一地拉入第一個日期，將其與它們進行比較Date.now()并查看它們是否相等。
uj5u.com熱心網友回復：
這個想法是在第一次打開頁面時將日期存盤在 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/
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/480119.html
標籤：javascript html css 动画片