使用计时器创建打开屏幕弹出窗口
最编程
2024-10-19 14:31:26
...
使用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毫秒），在延迟结束后隐藏开屏弹窗并显示主内容。
- 使用
效果
当你打开这个示例时，浏览器会在加载3秒后显示一个开屏弹窗，随后自动消失并展示网站的主要内容。
最后
这只是个自动弹窗，显示出现之后等待3秒之后弹窗消失。但是在我们实际用途中有很事点击确认按钮之后让弹窗进行消失，做一个点击消失的开屏弹窗时需要用到BOM本地存储的方法做出一个用户点击后消失的弹窗。
在下一个作品中我会为大家制作出一个点击消失的开屏弹窗