Question

如何仅在第一次上传主页时显示启动画面，同时我想要全屏移动和桌面。我正在尝试这个，但它每次上传页面时都会显示，而不是全屏，我的意思是在启动画面动画期间全屏隐藏 Web 浏览器 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

找到更多信息

仅在第一次上传主页时显示完整的启动画面

2 个答案: