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，在应用中自动…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...
Neo4j 集群管理：原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。 效果对比 默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
Python常用模块：time、os、shutil与flask初探
一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...