本文介绍如何使用 JavaScript 实现一个在页面首次加载时播放启动画面，并在用户关闭标签页后重置的功能。我们将探讨如何利用 `sessionStorage` API 来存储会话状态，从而控制启动画面的显示逻辑，确保每次用户打开新标签页时都能看到启动画面。
使用 sessionStorage 控制启动画面显示
在 Web 开发中，启动画面（Splash Screen）常用于在页面加载时提供视觉反馈，提升用户体验。通常我们希望启动画面只在用户首次访问页面时显示，避免重复出现。然而，当用户关闭标签页并重新打开时，我们可能希望启动画面再次显示。要实现这种效果，可以结合使用 sessionStorage API 和 JavaScript。
sessionStorage 与 localStorage 类似，都用于在浏览器中存储数据，但 sessionStorage 存储的数据只在当前会话（即浏览器标签页或窗口）有效。当用户关闭标签页或窗口时，sessionStorage 中的数据会被自动清除。这使得 sessionStorage 非常适合存储与当前会话相关的状态信息，例如启动画面是否已经播放过。
代码实现
以下是一个示例代码，演示如何使用 sessionStorage 来控制启动画面的显示：
HTML:
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
279 查看详情
Sub
Sub
Sub
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; }}
JavaScript:
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类也是隐藏，但是使用了不同的逻辑。还定义了几个动画，使启动画面更加生动。JavaScript 代码:首先，通过 document.querySelector(‘.splash’) 获取 splash 元素。使用 sessionStorage.getItem(‘hasRan’) 检查 sessionStorage 中是否已存在名为 hasRan 的数据项。如果 hasRan 不存在（即用户首次访问页面），则使用 sessionStorage.setItem(‘hasRan’, true) 创建该数据项，并将值设置为 true。这意味着启动画面应该显示。如果 hasRan 已经存在（即用户不是首次访问页面），则移除 animated 类，并添加 post_animated 类。 这会隐藏启动画面。使用 setTimeout 函数，在 6 秒后给 splash 元素添加 display-none 类，从而隐藏启动画面。
注意事项
sessionStorage 存储的数据是字符串类型。如果需要存储其他类型的数据，需要进行类型转换。sessionStorage 的容量有限，通常为 5MB 左右。因此，不适合存储大量数据。sessionStorage 只能在同源的页面之间共享数据。
总结
通过使用 sessionStorage API，我们可以轻松地控制启动画面在页面加载时的显示逻辑，确保每次用户打开新标签页时都能看到启动画面，从而提升用户体验。这种方法简单有效，适用于各种 Web 应用场景。
以上就是实现页面加载时播放启动画面，关闭标签页后重置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/714706.html
微信扫一扫 
支付宝扫一扫 
