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，在应用中自动…...
ubuntu22.04 编译安装libvirt 10.x
环境安装 sudo apt-get update -y sudo apt-get install qemu-system-x86 bridge-utils libyajl-dev -y sudo apt-get install build-essential autoconf automake libtool -y sudo apt-get install libxml2-dev libxslt1-dev libgnutls28-dev libpciaccess-dev libnl-3-de…...
[fastadmin] 第三十四篇 FastAdmin 商城模块标签使用详解
FastAdmin 商城模块标签使用详解 一、标签基本语法 1.1 基础语法格式 {shop:goodslist flag"参数值" id"变量名" row"数量"}<!-- 循环内容 --> {/shop:goodslist}1.2 常用参数说明 flag: 商品标记筛选id: 循环变量名row: 显示数量 1.…...
（2024，LLaVA-Bench (Wilder)，LLaVA-NeXT，LLaMA3，Qwen-1.5，语言模型扩展）
LLaVA-NeXT: Stronger LLMs Supercharge Multimodal Capabilities in the Wild 目录 1. 简介 2. 探索大规模语言模型的能力极限 3. LLaVA-Bench (Wilder)：日常生活视觉聊天基准 4. Benchmark 结果 1. 简介 我们通过引入近期更强大的开源大语言模型（…...
IPEX-LLM开发项目过程中的技术总结和心得
IPEX-LLM开发项目过程中的技术总结和心得 在人工智能快速发展的时代，高效地开发和部署大语言模型（LLM）已成为技术人员的必备技能。在我们的项目中，我们采用了 Intel Extension for PyTorch（简称 IPEX）和 L…...
HTTP/HTTPS ②-Cookie || Session || HTTP报头
这里是Themberfue 上篇文章介绍了HTTP报头的首行信息 本篇我们将更进一步讲解HTTP报头键值对的含义~~~ ❤️❤️❤️❤️ 报头Header ✨再上一篇的学习中，我们了解了HTTP的报头主要是通过键值对的结构存储和表达信息的；我们已经了解了首行的HTTP方法和UR…...
【软考】软件设计师
「学习路线」（推荐该顺序学习，按照先易后难排序） 1、上午题—计算机系统（5~6分）[1.8; ] 2、上午题—程序设计语言（固定6分）[1.9; ] 3、下午题—试题一（15分） 4、上午题—…...
K8s Pod OOMKilled，监控却显示内存资源并未打满
1. 问题现象 pod一直重启，通过grafana查看，发现内存使用率并没有100%。 2. 排查过程 2.1 describe查看pod最新一次的状态 可以明显看到，最近一次的重启就是因为内存不足导致的。 2.2 describe 查看node节点状态 找到原因了，原来…...
C++ 原子变量
C 原子变量 文章目录 C 原子变量1. 原子变量是什么？2. 原子操作的特点3. 原子变量的作用1. 多线程安全的共享数据访问2. 替代锁机制3. 实现低级同步算法 4. 原子变量的常见操作5. 内存顺序（Memory Ordering）内存顺序控制在原子变量中的作用如…...
linux网络 | http结尾、理解长连接短链接与cookie
前言：本节是http章节的最后一部分，主要解释一些小概念。讲解到了HTTP的方法，表单， 重定向等等。 现在废话不多说， 开始我们的学习吧。 ps：本节内容都是概念， 知道就行， 友友们放心观…...
金融项目实战 02|接口测试分析、设计以及实现
目录 ⼀、接口相关理论 二、接口测试 1、待测接口：投资业务 2、接口测试流程 3、设计用例理论 1️⃣设计方法 2️⃣工具 4、测试点提取 5、测试用例 ⼀、接口相关理论 1、ui功能测试和接⼝测试那个先执⾏？为什么？ 结论：…...