实现页面加载时播放启动画面，关闭标签页后重置

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

实现页面加载时播放启动画面，关闭标签页后重置

2025-10-25

浏览次数：次

返回列表

实现页面加载时播放启动画面，关闭标签页后重置

本文介绍如何使用 J*aScript 实现一个在页面首次加载时播放启动画面，并在用户关闭标签页后重置的功能。我们将探讨如何利用 `sessionStorage` API 来存储会话状态，从而控制启动画面的显示逻辑，确保每次用户打开新标签页时都能看到启动画面。

使用 sessionStorage 控制启动画面显示

在 Web 开发中，启动画面（Splash Screen）常用于在页面加载时提供视觉反馈，提升用户体验。通常我们希望启动画面只在用户首次访问页面时显示，避免重复出现。然而，当用户关闭标签页并重新打开时，我们可能希望启动画面再次显示。要实现这种效果，可以结合使用 sessionStorage API 和 J*aScript。

sessionStorage 与 localStorage 类似，都用于在浏览器中存储数据，但 sessionStorage 存储的数据只在当前会话（即浏览器标签页或窗口）有效。当用户关闭标签页或窗口时，sessionStorage 中的数据会被自动清除。这使得 sessionStorage 非常适合存储与当前会话相关的状态信息，例如启动画面是否已经播放过。

代码实现

以下是一个示例代码，演示如何使用 sessionStorage 来控制启动画面的显示：

HTML:

Mureka

Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。

1091 查看详情 Mureka

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

J*aScript:

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

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

代码解释

HTML 结构: 定义了一个 div 元素，类名为 splash，用于包含启动画面的内容。
CSS 样式: 设置了 splash 元素的样式，包括背景颜色、层叠顺序、居中对齐等。display-none 类用于隐藏启动画面，post_animated类也是隐藏，但是使用了不同的逻辑。还定义了几个动画，使启动画面更加生动。
J*aScript 代码:
- 首先，通过 document.querySelector('.splash') 获取 splash 元素。
- 使用 sessionStorage.getItem('hasRan') 检查 sessionStorage 中是否已存在名为 hasRan 的数据项。
- 如果 hasRan 不存在（即用户首次访问页面），则使用 sessionStorage.setItem('hasRan', true) 创建该数据项，并将值设置为 true。这意味着启动画面应该显示。
- 如果 hasRan 已经存在（即用户不是首次访问页面），则移除 animated 类，并添加 post_animated 类。这会隐藏启动画面。
- 使用 setTimeout 函数，在 6 秒后给 splash 元素添加 display-none 类，从而隐藏启动画面。