HTML实战课堂之启动动画弹窗
一：代码片段讲解
小提示：下面是一个包含启动页和弹窗的完整示例。这个示例包括一个简单的启动页和一个弹窗，当用户点击启动页上的按钮时，会显示弹窗。
1. **HTML结构**：
- `#startPage`：启动页，包含一个标题和一个按钮。
- `#overlay`：覆盖层，用于在弹窗显示时覆盖整个页面。
- `#popup`：弹窗，包含一些文本和一个关闭按钮。
2. **CSS样式**：
- 设置基本样式，使启动页居中显示。
- 设置覆盖层和弹窗的样式，使其居中并添加一些视觉效果。
- 默认情况下，启动页是可见的，而覆盖层和弹窗是隐藏的。
3. **JavaScript代码**：
- `window.onload`：当页面加载时，显示启动页。
- `showPopup`函数：隐藏启动页，显示覆盖层和弹窗。
- `closePopup`函数：隐藏覆盖层和弹窗。
二：完整代码
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>启动页与弹窗示例</title><style>/* 样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}#startPage {display: none; /* 默认隐藏 */text-align: center;}#overlay {display: none; /* 默认隐藏 */position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 999;}#popup {display: none; /* 默认隐藏 */position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 20px;background-color: white;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);z-index: 1000;}button {padding: 10px 20px;font-size: 16px;cursor: pointer;}</style></head><body><!-- 启动页 --><div id="startPage"><h1>欢迎来到我们的网站！</h1><button onclick="showPopup()">点击这里查看弹窗</button></div><!-- 弹窗内容 --><div id="overlay"></div><div id="popup"><h2>这是一个弹窗</h2><p>这是弹窗的内容。</p><button onclick="closePopup()">关闭</button></div><script>// JavaScript 代码window.onload = function() {document.getElementById('startPage').style.display = 'block'; // 显示启动页};function showPopup() {document.getElementById('startPage').style.display = 'none'; // 隐藏启动页document.getElementById('overlay').style.display = 'block'; // 显示覆盖层document.getElementById('popup').style.display = 'block'; // 显示弹窗}function closePopup() {document.getElementById('overlay').style.display = 'none'; // 隐藏覆盖层document.getElementById('popup').style.display = 'none'; // 隐藏弹窗}</script></body></html>```
相关文章：
HTML实战课堂之启动动画弹窗
一：代码片段讲解 小提示：下面是一个包含启动页和弹窗的完整示例。这个示例包括一个简单的启动页和一个弹窗，当用户点击启动页上的按钮时，会显示弹窗。 1. **HTML结构**： - #startPage：启动页，包…...
将本地的 Git 仓库上传到 GitHub 上（github没有该仓库）
文章目录 步骤 1：在 GitHub 上创建新仓库步骤 2：配置本地仓库步骤 3：添加远程仓库地址步骤 4：推送本地代码到 GitHub验证上传 步骤 1：在 GitHub 上创建新仓库 登录 GitHub： 打开浏览器并访问 GitHub。使用自…...
【Linux】模拟Shell命令行解释器
一、知识补充 1.1 snprintf snprintf() 是 C语言的一个标准库函数，定义在<stdio.h>头文件中。 snprintf() 函数的功能是格式化字符串，并将结果存储在指定的字符数组中。该函数的原型如下： int snprintf(char *str, size_t size, con…...
G-Star Landscape 2.0 重磅发布，助力开源生态再升级
近日，备受行业瞩目的 G-Star Landscape 迎来了其 2.0 版本的发布，这一成果标志着 GitCode 在开源生态建设方面又取得了重要进展。 G-Star Landscape仓库链接： https://gitcode.com/GitCode-official-team/G-Star-landscape 2024 GitCode 开…...
Lianwei 安全周报|2024.1.7
以下是本周「Lianwei周报」，我们总结推荐了本周的政策/标准/指南最新动态、热点资讯和安全事件，保证大家不错过本周的每一个重点！ 政策/标准/指南最新动态 01 国家发改委等三部门印发《国家数据基础设施建设指引》 国家数据基础设施是从数据…...
ASP.NET Core 实现微服务 - Consul 配置中心
这一次我们继续介绍微服务相关组件配置中心的使用方法。本来打算介绍下携程开源的重型配置中心框架 apollo 但是体系实在是太过于庞大，还是让我爱不起来。因为前面我们已经介绍了使用Consul 做为服务注册发现的组件 ，那么干脆继续使用 Consul 来作为配置…...
使用redis的5种常用场景
文章目录 1. 缓存热点数据2. 分布式锁3. 计数器和限流器4. 消息队列5. 会话管理总结 在日常开发工作中，Redis作为一款高性能的内存数据库，凭借其强大的功能特性和卓越的性能表现，已经成为了许多项目中不可或缺的组件。本文将详细介绍Redis在实…...
微信小程序防止重复点击事件
直接写在app.wpy里面，全局可以调用 // 防止重复点击事件preventActive(fn) {const self this;if (this.globalData.PageActive) {this.globalData.PageActive false;if (fn) fn();setTimeout(() > {self.globalData.PageActive true;}, 3000); //设置该时间内…...
PySpark用sort-merge join解决数据倾斜的完整案例
假设有两个大表 table1 和 table2 ，并通过 sort-merge join 来解决可能的数据倾斜问题。 from pyspark.sql import SparkSession from pyspark.sql.functions import col# 初始化SparkSession spark SparkSession.builder.appName("SortMergeJoinExample&quo…...
sklearn-逻辑回归-制作评分卡
目录 数据集处理 分箱 分多少个箱子合适 分箱要达成什么样的效果 对一个特征进行分箱的步骤 分箱的实现 封装计算 WOE 值和 IV值函数 画IV曲线，判断最佳分箱数量 结论 pd.qcut 执行报错 功能函数封装 判断分箱个数 在银行借贷场景中，评分卡是…...
scrapy爬取图片
scrapy 爬取图片 环境准备 python3.10scrapy pillowpycharm 简要介绍scrapy Scrapy 是一个开源的 Python 爬虫框架，专为爬取网页数据和进行 Web 抓取而设计。它的主要特点包括： 高效的抓取性能：Scrapy 采用了异步机制，能够高效…...
在 Vue 项目中使用地区级联选
在 Vue 项目中使用地区级联选择的完整流程： 1.安装依赖包，这个包提供了中国省市区的完整数据。 npm install element-china-area-data --save 2.导入数据 import { regionData } from element-china-area-data 这个包提供了几种不同的数据格式&#…...
【简博士统计学习方法】第1章：1. 统计学习的定义与分类
自用笔记 1. 统计学习的定义与分类 1.1 统计学习的概念 统计学习（Statistical Machine Learning）是关于计算机基于数据构建概率统计模型并运用模型对数据进行预测与分析的一门学科。 以计算机和网络为平台；以数据为研究对象；以…...
利用 Python 脚本批量创建空白 Markdown 笔记
文章目录 利用 Python 脚本批量创建空白 Markdown 笔记1 背景介绍2 需求描述3 明确思路4 具体实现4.1. 遍历 toc.md 文件，收集文件名和对应的文件内容4.2. 实现文件批量生成逻辑4.3. 补全缺失的工具函数4.4. 进一步补全工具函数中的工具函数 5 脚本运行6 注意事项 利…...
【Qt】C++11 Lambda表达式
1. 举例 connect(ui->pushButton, &QPushButton::clicked, [](bool checked){//具体代码qDebug() << "Hello" << checked;}); 2. 详情 //完整形式 [ capture ] ( params ) opt -> ret { body; }; capture 是捕获列表params 是参数表opt 是函数…...
怎样提高服务器中的数据传输速度？
服务器中的数据传输速度会影响着用户的体验感，当企业中的数据传输速度出现卡顿或者是过慢时，用户不能及时浏览到所需的内容，给用户造成不好的体验感，那么企业该怎样才能提高服务器中的数据传输速度呢？ 服务器之间如何传…...
Vue 封装公告滚动
文章目录 需求分析1. 创建公告组件Notice.vue2. 注册全局组件3. 使用 需求 系统中需要有一个公告展示，且这个公告位于页面上方，每个页面都要看到 分析 1. 创建公告组件Notice.vue 第一种 在你的项目的合适组件目录下（比如components目录&a…...
JVM实战—12.OOM的定位和解决
大纲 1.如何对系统的OOM异常进行监控和报警 2.如何在JVM内存溢出时自动dump内存快照 3.Metaspace区域内存溢出时应如何解决(OutOfMemoryError: Metaspace) 4.JVM栈内存溢出时应如何解决(StackOverflowError) 5.JVM堆内存溢出时应该如何解决(OutOfMemoryError: Java heap s…...
【python翻译软件V1.0】
如果不想使用密钥的形式，且需要一个直接可用的中英文翻译功能，可以使用一些免费的公共 API，如 opencc 或其他无需密钥的库，或直接用 requests 获取翻译结果。 其中，我可以给你一个简单的代码示例，使用 tra…...
Spring Boot中的依赖注入是如何工作
Spring Boot 中的依赖注入（Dependency Injection，简称 DI）是通过 Spring 框架的核心机制——控制反转（Inversion of Control，IOC）容器来实现的。Spring Boot 基于 Spring Framework，在应用中自动…...
前端测试吐槽：别再写那些没用的测试了！
前端测试吐槽：别再写那些没用的测试了！ 毒舌时刻 前端测试就像体检——每个人都知道要做，但真正认真做的没几个。Jest、React Testing Library、Cypress... 一堆测试工具让你挑花了眼，结果你的测试还是写得像一坨屎。 我就想不明白…...
无痛人流三天能出门吗？术后出行与身体恢复科学指南
很多女性在无痛人流术后都会关心出行与恢复问题，其中 “无痛人流三天能出门吗” 是高频咨询内容。术后恢复不仅关系到短期舒适度，也影响生殖系统长期健康。结合临床护理经验与行业康复标准，本文对术后出行时机、注意事项及科学修护方式进行客…...
——数据清洗与预处理概述)
Python数据分析项目实战(046)——数据清洗与预处理概述
版权声明 本文原创作者：谷哥的小弟 作者博客地址：http://blog.csdn.net/lfdfhl 数据清洗与预处理是数据分析的基础环节。本阶段工作旨在修复数据质量问题、规范数据格式、优化数据结构，为后续分析建模提供可靠数据。 缺失值处理 缺失值指数据集中存在的空值或未记录的信息…...
性能测试专家养成记：工具、思维、实战全解析
在软件质量保障体系中，性能测试正从一个可选的“加分项”演变为关乎用户体验与业务存续的“必答题”。对于广大软件测试从业者而言，成长为一名性能测试专家，不仅意味着技术深度的拓展，更代表着从“验证功能”到“保障体验”乃至“…...
2026年必看：高端内存条品牌优选指南
随着电竞行业的快速发展，高性能内存条成为了越来越多玩家的刚需。然而，在众多品牌中选择一款性能可靠、性价比高的产品并不容易。本文将为你推荐一个值得信赖的品牌——Deseroyer毁灭者，并通过具体数据和案例支撑，帮助你做出明智的…...
终极指南：如何免费解锁Cursor Pro功能，彻底解决API限制问题
终极指南：如何免费解锁Cursor Pro功能，彻底解决API限制问题 【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youve …...
LLM到Harness Engineering，我花一天时间捋清了这条技术链，终于搞懂了！
本文深入浅出地梳理了AI领域中的核心概念，从基础的大语言模型（LLM）、Token、Context、Prompt，到工具（Tool）、模型上下文协议（MCP），再到智能体（Agentÿ…...
kprobe函数入口时的汇编跳板执行流程与栈帧机制
kprobe函数入口汇编跳板执行流程与栈帧机制 文章目录kprobe函数入口汇编跳板执行流程与栈帧机制前言环境准备ftrace跳板创建跳板执行流程与栈帧逐行拆解初始状态与安全校验双层栈帧构建（CONFIG_FRAME_POINTER）通用寄存器保存与C函数参数准备剩余寄存器保…...
Python对象生命周期全链路追踪，从PyObject_MALLOC到gc_collect：一线工程师压测验证的5个致命内存误用场景
第一章：Python对象生命周期全链路追踪概览Python对象的生命周期涵盖创建、使用、引用管理直至最终销毁的全过程。理解这一链条对诊断内存泄漏、优化资源使用及编写健壮代码至关重要。对象并非仅在 __init__ 中诞生，也非仅靠 del 显式终结；其真…...
鸣潮智能辅助工具：深度学习驱动的游戏自动化解决方案
鸣潮智能辅助工具：深度学习驱动的游戏自动化解决方案 【免费下载链接】ok-wuthering-waves 鸣潮 后台自动战斗 自动刷声骸 一键日常 Automation for Wuthering Waves 项目地址: https://gitcode.com/GitHub_Trending/ok/ok-wuthering-waves 价值定位…...