当前位置：首页 > news >正文

利用定时器制作开屏幕弹窗

news 2024/10/23 2:03:34

使用JavaScript中的定时器（setTimeout()）可以轻松实现一个开屏弹窗（Splash Screen），该弹窗在页面加载后几秒钟显示，然后自动消失。以下是一个简单的实现示例，包括HTML、CSS和JavaScript。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>开屏弹窗示例</title><link rel="stylesheet" href="styles.css">
</head>
<body><div id="splash-screen" class="splash"><h1>欢迎来到我的网站!</h1><p>加载中...</p></div><div class="content" style="display: none;"><h2>这是主内容区域</h2><p>欢迎访问我的网站，这里是一些精彩的内容!</p></div><script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {margin: 0;font-family: Arial, sans-serif;
}.splash {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.8);color: white;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 1000; /* 确保在最上层 */
}.content {padding: 20px;
}

JavaScript (script.js)

window.onload = function() {// 设置定时器，延迟3秒后隐藏开屏弹窗并显示内容setTimeout(() => {const splashScreen = document.getElementById('splash-screen');const content = document.querySelector('.content');// 隐藏开屏弹窗splashScreen.style.display = 'none';// 显示主内容content.style.display = 'block';}, 3000); // 3000毫秒后执行
};

说明

HTML结构:
- 包含一个 div 用于显示开屏弹窗（#splash-screen）和一个用于主内容的 div（.content）。
- 初始时，主内容区域的 display 属性设置为 none，以便在加载时不显示。
CSS样式:
- 使用了 flexbox 来居中显示开屏弹窗的内容。
- rgba(0, 0, 0, 0.8) 背景颜色使弹窗具有半透明效果，提升视觉效果。
JavaScript逻辑:
- 使用 window.onload 确保页面完全加载后执行定时器。
- setTimeout() 设置延迟3秒（3000毫秒），在延迟结束后隐藏开屏弹窗并显示主内容。