我可以讓我的閃屏在頁(yè)面加載時(shí)只播放一次，并且不再播放，但是在我關(guān)閉標(biāo)簽后，它不再播放了，有什么方法可以修復(fù)它，或者設(shè)置一個(gè)JS函數(shù)重置的時(shí)間限制？有人能把代碼寫(xiě)進(jìn)去嗎，那會(huì)很有幫助:)

HTML:

<div class="splash">
    <h1 class="splash-content" id="content1">Sub/h1>
    <h1 class="splash-content" id="content2">Sub</h1>
    <h1 class="splash-content" id="content3">Sub</h1>
</div>

CSS:

.splash {
    background: black;
    z-index: 2;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    transition: 4s;
}

.splash-content {
    color: white;
    transform: translateY(11em);
}

.splash.display-none{
    opacity: 0;
    z-index: 0;
    transform: translateY(-100%);
    transition: 1.5s;
}

.splash.post_animated {
    display: none;
}

#content1 {
    animation: come-in-first 2s ease-in;
}

#content2 {
    animation: come-in-second 3s ease-in;
}

#content3 {
    transform: translate(4px, 11em);
    animation: come-in-third 4s ease-in;
}

@keyframes come-in-first {
    0% {
        transform: translateY(13em);
        opacity: 0;
    }
}

@keyframes come-in-second {
    0%, 50% {
        transform: translateY(11.5em);
        opacity: 0;
    }
}

@keyframes come-in-third {
    0%, 60% {
        transform: translate(4px, 11.5em);
        opacity: 0;
    }
}

JS:

const splash = document.querySelector('.splash');

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


var firstContainer = document.querySelector(".splash");

var result = localStorage.getItem('hasRan');

if (!result) {
        localStorage.setItem('hasRan', true);
} else {
    firstContainer.classList.remove("animated");
    firstContainer.classList.add("post_animated");
}

如果你感到困惑，我正在努力使結(jié)果函數(shù)在頁(yè)面關(guān)閉時(shí)重置，這樣當(dāng)你關(guān)閉標(biāo)簽頁(yè)后再次打開(kāi)頁(yè)面時(shí)會(huì)出現(xiàn)閃屏。

如果您使用sessionStorage API而不是localStorage API，那么當(dāng)用戶(hù)關(guān)閉窗口時(shí)，它會(huì)重置。

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


var firstContainer = document.querySelector(".splash");

var result = sessionStorage.getItem('hasRan');

if (!result) {
        sessionStorage.setItem('hasRan', true);
} else {
    firstContainer.classList.remove("animated");
    firstContainer.classList.add("post_animated");
}

首先，我會(huì)說(shuō)你不需要其他代碼塊，除了這個(gè):

const splash = document.querySelector('.splash');

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

但是如果您堅(jiān)持使用localStorage API。在其他事情發(fā)生之前，您必須首先清除本地存儲(chǔ)。

localStorage.clear();

const splash = document.querySelector('.splash');

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


var firstContainer = document.querySelector(".splash");

var result = localStorage.getItem('hasRan');

if (!result) {
        localStorage.setItem('hasRan', true);
} else {
    firstContainer.classList.remove("animated");
    firstContainer.classList.add("post_animated");
}