仅在上传主页时第一次显示全屏

Question

我如何才能在第一次上传主页时显示启动屏幕，我还想要全屏手机和桌面。我试过这个，但它每次上传页面时都会显示，而不是全屏，我的意思是全屏隐藏网页浏览器2秒钟的启动屏幕动画，动画是一个svg动画文件。这是我正在尝试的代码。

const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e)=>{
setTimeout(()=>{
splash.classList.add('display-none');
}, 2000);
})

.splash{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#000000;
z-index:999;
color:#ffffff;
text-align:center;
line-height:90vh;
}
.splash.display-none{
position:fixed;
opacity:0;
top:0;
left:0;
width:100%;
height:100vh;
background:#000000;
z-index:-999;
color:#ffffff;
text-align:center;
line-height:90vh;
transition:all 0.5s;
}
@keyframes fadeIn{
to{
opacity:1;
}
}
.fade-in{
opacity:0;
animation:fadeIn 1s ease-in forwards;
}

<div class="splash">
<p class="fade-in">
<img src="https://2ndchance.mx/wp-content/uploads/2021/06/2ndchance-logo-animado-v1.0.0_animated-2.svg" alt="splash screen" width="200px"
</p>
</div>

Answer 1

当用户进入页面时，您可以显示动画并保存cookie，下次检查cookie是否存在，如果不存在，则可以显示动画

下面是一个关于mozilla文档的示例：

function doOnce() {
if (!document.cookie.split('; ').find(row => row.startsWith('doSomethingOnlyOnce'))) {
// Note that we are setting `SameSite=None;` in this example because the example
// needs to work cross-origin.
// It is more common not to set the `SameSite` attribute, which results in the default,
// and more secure, value of `SameSite=Lax;`
document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=None; Secure";
const output = document.getElementById('do-once')
output.textContent = '> Do something here!'
}
}

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#example_3_do_something_only_once

Answer 2

localStorage是一种更简单的方法。在您的情况下，localStorage可以只存储一个值，无论在您的情形下是true还是false。

默认情况下，当用户还没有访问该网站时，localStorage将是未定义的，这意味着用户显然以前从未访问过该网站(或者至少最近清除了他们的浏览数据(

这意味着在用户第一次访问站点时，存储将更新为localStorage.seenScreen = true

然后简单地使用if语句来检查该值是false、undefined还是true。如果为false，则显示启动屏幕；如果为true，则不显示。

var seenSplash = localStorage.seenScreen
seenSplash ? showScreen() : console.log('Do not show screen')

更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage