原生JS和CSS，HTML实现开屏弹窗
开屏弹窗常应用于打开游戏，或者打开网站的时候，跳出来在正中间，来显示一些信息，并可以设置今日不再显示
CSS代码如下
<style>#box {width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.2);position: relative;display: none;}.alerts {width: 250px;height: 400px;background-color: pink;position: relative;left: 20%;top: 10%;}h1 {color: red;text-align: center;padding-top: 20px;font-family: KaiTi;}#contents {height: 100px;width: 350px;margin-left: 10%;overflow-x: hidden;overflow-y: scroll;margin-top: 40%;color: black;}.contents_box {height: 300px;width: 400px;border: 1px solid pink;margin: auto;text-align: center;background-image: url(/img/q.jpeg);background-size: 120%;background-repeat: no-repeat;border-radius: 15%;}.result {text-align: right;margin-top: 20px;}.btn {width: 100px;height: 60px;line-height: 60px;margin: 40px auto;border: 1px solid pink;border-radius: 15%;color: white;text-align: center;background-color: purple;transition-duration: 0.5s;}.btn:hover {background-color: white;color: black;font-family: KaiTi;padding-top: 5px;}.confrim div {margin-bottom: 5px;}.pic_tree img {width: 100px;height: 100px;position: absolute;top: 15px;}.pic img {width: 50px;height: 50px;margin: auto;position: absolute;}.pic {width: 50px;height: 50px;margin-left: 150px;position: absolute;}</style>以下为HTML代码：
<!-- 遮罩层 --><div id="box"><!-- 圣诞树 --><div class="pic_tree"><img src="/img/圣诞树.png" alt=""></div><!-- 公告层 --><div id="alerts"><!-- 公告头 --><h1>圣诞快乐</h1><!-- 公告内容盒子 --><div class="contents_box"><div id="contents"><p>111111111</p></div></div><div class="result"><input type="checkbox" id="results" />今日不再显示</div><div class="pic"><img src="/img/猫咪.png" alt=""></div><div class="btn" onclick="breakAlert()">我知道了</div></div></div>注：代码内的图片可能会失效，仅仅是装饰作用，可以忽略或者删除
JS代码如下：
<script>//获得最外面的大盒子let box = document.getElementById(`box`);//获得内容let content = document.getElementById('contents');//获得今日不再显示的复选框let resultst = document.getElementById('results');let obj = {contents: '《敕勒歌》是南北朝时期流传于北朝的乐府民歌，
一般认为是由鲜卑语译成汉语的诗作。
此诗歌咏了北国草原壮丽富饶的风光，
抒写敕勒人热爱家乡热爱生活的豪情。
开头两句交代敕勒川位于高耸云霄的阴山脚下，
将草原的背景衬托得十分雄伟。接着两句用“穹庐”作比喻，
说天空如蒙古包，盖住了草原的四面八方，
以此来形容极目远望，天野相接，无比壮阔的景象。
最后三句描绘了一幅水草丰盛、牛羊肥壮的草原全景图。
有静有动，有形象，有色彩。全诗风格明朗豪爽，
境界开阔，音调雄壮，语言明白如话，艺术概括力极强
，受到历代文论家和文学史论著的好评。对它的学术研究，经久不衰。`'};//将对象的内容里的值填入content中content.innerHTML = obj.contents;//判断当本地存储的这个时间小于现在的时间时，且本地存储存在的时候if (localStorage.getItem('times') < + new Date() && sessionStorage.getItem('status') != 1) {//显示这个盒子弹窗（弹窗默认为隐藏）box.style.display = 'block';}//定义一个函数为breakAlert，将他绑定在“我知道了”按钮上function breakAlert() {//即当复选框被选中的时候，为trueif (resultst.checked == true) {//设置一个本地存储，数值为当前时间+1天，即明天的当前时间localStorage.setItem('times', +new Date() + 24 * 60 * 60 * 1000);}//并且设置一个临时储存，名为“status”，值为1sessionStorage.setItem('status', `1`);//同时将盒子设为隐藏box.style.display = 'none';}</script>代码内的obj仅为示例，后续可更改为任意数据或者直接从其他地方引用，本篇文章仅仅在前端并未与其他服务器等交互的前提下，使用原生JS和CSS,HTML来完成类似的开屏弹窗示例，后续可更改CSS样式代码让样式变得更好看
相关文章：
原生JS和CSS，HTML实现开屏弹窗
开屏弹窗常应用于打开游戏，或者打开网站的时候，跳出来在正中间，来显示一些信息，并可以设置今日不再显示 CSS代码如下 <style>#box {width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.2);position: relative…...
微软发布Win11 24H2系统11月可选更新KB5046740！
系统之家11月22日报道，微软针对Win11 24H2系统推出2024年11月最新可选更新补丁KB5046740，更新后系统版本后升至26100.2454，此次更新后修复当应用程序以PDF和XLSX格式导出图表对象时停止响应、无法使用API查找旋转信息等问题。以下小编将给大家…...
【Rabbitmq篇】高级特性----TTL，死信队列，延迟队列
目录 一.TTL 1.设置消息的TTL 2.设置队列的TTL 3.俩者区别 二.死信队列 定义： 消息成为死信的原因： 1.消息被拒绝（basic.reject 或 basic.nack） 2.消息过期（TTL） 3.队列达到最大长度 编辑 …...
【Linux】gcc/g++使用
编译 我们知道，gcc只能编译C，g既能编译C，也能编译C。 由于两者的选项是相同的，这里我们使用gcc来说明。 这就是一个我们在linux中gcc编译一段代码后会自动生成一个a.out为名的可执行文件，然后我们./a.out，…...
IDEA2023 SpringBoot整合MyBatis（三）
一、数据库表 CREATE TABLE students (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(100) NOT NULL,age INT,gender ENUM(Male, Female, Other),email VARCHAR(100) UNIQUE,phone_number VARCHAR(20),address VARCHAR(255),date_of_birth DATE,enrollment_date DATE,cours…...
Java网络编程 - cookiesession
cookie 之前学习了 Okhttp3 库可以调用API、抓取网页、下载文件。但是这些操作都是不要求登录的，如果 API、网页、文件等内容要求登录才能访问，就需要学习新的 cookie 相关的知识。 下面以豆瓣为例，使用 Java 程序读取“我的豆瓣”页面内容…...
 1)
100.【C语言】数据结构之二叉树的堆实现(顺序结构) 1
目录 1.顺序结构 2.示意图 编辑 从物理结构还原为逻辑结构的方法 3.父子节点编号的规律 4.顺序存储的前提条件 5.堆的简介 堆的定义 堆的两个重要性质 小根堆和大根堆 6.堆的插入 7.堆的实现及操作堆的函数 堆的结构体定义 堆初始化函数HeapInit 堆插入元素函…...
《Python基础》之循环结构
目录 简介 一、for循环 1、基本语法与作用 2、使用 range() 函数配合 for 循环 3、嵌套的for循环 二、while循环 1、基本语法与作用 2、while 循环嵌套 （1）、while循环与while循环嵌套 （2）、while循环与for循环嵌套 简介 …...
使用JDBC操作数据库
文章目录 使用JDBC操作数据库1. JDBC访问数据库步骤2. Statement与PreparedStatement区别3. JDBC的内容4. JDBC封装4.1 为什么进行JDBC封装4.2 实现JDBC封装4.3 什么是DAO4.4 配置数据库访问参数4.5 配置数据库连接池使用之JNDI的方式 5. 单例模式5.1 懒汉模式5.2 饿汉模式 使用…...
轻松解析 PDF 文档：深入了解 Python 的 pdfplumber 库
轻松解析 PDF 文档：深入了解 Python 的 pdfplumber 库 PDF 是一种常见的文件格式，广泛用于报告、文档、表单等领域。然而，如何高效解析 PDF 内容（尤其是文本和表格），一直是开发者面临的挑战。pdfplumber 是…...
实验五 时域采样与频域采样
时域采样理论的验证 【实例3-1】近似绘制x (n) R4n 在(0,2 π \pi π ) 上的幅频响应曲线( F T [ x ( n ) ] FT[x(n)] FT[x(n)] )。 x [1, 1, 1, 1]; N 64; xk fft(x, N); figure; subplot(2, 1, 1); stem(0:3, x, .); subplot(2, 1, 2); k 0:N-1; plot(2*k/N, abs(x…...
爬虫cookie反爬------加速乐（jsl）
加速乐 反爬虫技术：加速乐采用了包括OB混淆、动态加密算法和多层Cookie获取等高级反爬虫技术，确保整体校验的严密性。关键校验字段位于Cookie中的 __jsl_clearance_s，其验证过程通常涉及三次关键的请求，有效抵御恶意爬虫的侵扰。…...
设计模式——解释器模式
定义： 解释器模式是一种行为设计模式，它给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。在这种模式中，通常会将一个复杂的表达式（如数学表达…...
函数)
sorted()函数
sorted(iterable, keyNone, reverseFalse)iterable: 需要排序的可迭代对象（如列表、元组、字符串等）。 key: 一个函数，用于从每个元素中提取排序的依据。如果未指定，默认直接比较元素本身。 reverse: 一个布尔值，Tru…...
动静态分析
静态分析 获取哈希值： 查壳： 导出函数： 获取资源信息： 通过发现dos头和pe头，来确定它是个可执行程序。 动态分析...
2024年信号处理与神经网络应用国际学术会议（SPNNA 2024）
重要信息 会议时间：2024年12月13-15日 会议地点：中国武汉 会议官网：www.spnna.org 会议简介 2024年信号处理与神经网络应用国际学术会议（SPNNA 2024）将于2024年12月13日至15日在中国武汉召开。本次会议旨在为全球研…...
winfrom快速自适应
在软件界面设计中，我们通常需要添加各种布局器和规则来实现界面布局，但对于不太熟练的工程师来说，这可能存在一定难度。这里要分享一种自适应布局的方法，它可以根据界面比例自动缩放内容控件，在较短时间内完成软件布局…...
VMware16安装macOS12【详细教程】
因为在应用上线IOS应用商店时，需要用到mac系统进行，于是就在VMware16pro虚拟机进行安装macOS12系统，安装的过程做了一个记录，希望对你有所帮助！ 前言 首先需要下载好下面工具： VMware workstation pro 16…...
【设计模式】【创建型模式（Creational Patterns）】之单例模式
单例模式是一种常用的创建型设计模式，其目的是确保一个类只有一个实例，并提供一个全局访问点。 单例模式的原理 单例模式的核心在于控制类的实例化过程，通常通过以下方式实现： 私有化构造函数，防止外部直接实例化。…...
【1.2 Getting Started---＞Installation Guide】
NVIDIA TensorRT DOCS 此 NVIDIA TensorRT 10.6.0 安装指南提供安装要求、TensorRT 包中包含的内容列表以及安装 TensorRT 的分步说明。 安装指南 摘要： 本 NVIDIA TensorRT 10.3.0 安装指南提供了安装要求、TensorRT 软件包中包含的内容列表以及安装 TensorRT 的…...
Vue 中 data 属性为函数的深度剖析：原理、区别与实践
在 Vue.js 中，data 属性通常是一个 函数 而不是一个对象，这背后有一系列设计上的原因和原理，尤其是与 Vue 的组件系统、实例化机制、以及响应式数据的管理有关。下面我将详细解答这个问题，并结合实际项目示例和代码分析，进行全面讲解。 1. Vue 中 data 为什么是一个函数而…...
【漏洞复现】H3C 用户自助服务平台 dynamiccontent.properties.xhtml 远程命令执行
免责声明： 本文旨在提供有关特定漏洞的信息，以帮助用户了解潜在风险。发布此信息旨在促进网络安全意识和技术进步，并非出于恶意。读者应理解，利用本文提到的漏洞或进行相关测试可能违反法律或服务协议。未经授权访问系统、网络或应用程序可能导致法律责任或严重后果…...
【技术支持】vscode不使用插件，两种方式重命名html标签对
1. 使用 VS Code 内置功能 VS Code 内置支持 HTML/XML 标签对的重命名功能。步骤如下： 将光标放置在标签名上（如 <div> 或</div>）。按下快捷键 F2（重命名符号）。输入新的标签名，按 Enter&…...
【Seed-Labs 2.0】The Kaminsky Attack Lab
说在前面 本实验属为Seed-Labs 的DNS LAB 中的第二个实验，是第一个实验的延伸，从攻击者和受害者同一个LAN中变成不在同一个LAN中，该系列一共有五个实验: Local DNS Attack LabThe Kaminsky Attack LabDNS Rebinding Attack LabDNS Infrastr…...
托管静态资源)
node.js中使用express.static()托管静态资源
express.static()定义 express.static(root, [options])是一个中间件函数，负责为Express应用提供静态资源服务。它允许你指定一个或多个目录作为静态资源的根目录，当客户端请求这些资源时，Express会查找并返回对应的文件。 安装express npm i…...
 函数深入解析)
SQL MAX() 函数深入解析
SQL MAX() 函数深入解析 概述 SQL（Structured Query Language）是一种广泛使用的数据库查询语言，它允许用户从数据库中检索、更新和管理数据。在SQL中，MAX() 函数是一个常用的聚合函数，用于从数据集中找出某一列的最大…...
WPF——自定义ToolTip
问题 前一天制作的图标按钮，在测试的过程中发现一个问题：为图标按钮添加的提示如下图所示，它的显示效果非常差，甚至不能看清文本内容，并且其字体与颜色也不是愚所希望的。 产生原因 此是由于tooltip有一个默认的样式…...
linux基本命令（1）
1. 文件和目录操作 ls — 列出目录内容 ls # 显示当前目录的文件和目录 ls -l # 显示详细的文件信息（权限、大小、修改时间等） ls -a # 显示所有文件（包括隐藏文件） ls -lh # 显示详细信息并以易读的方式显示文件大小 cd — 改…...
从0-1逐步搭建一个前端脚手架工具并发布到npm
前言 本文介绍的案例已同步到github，github地址。 vue-cli 和 create-react-app 等 cli 脚手架工具用于快速搭建应用，无需手动配置复杂的构建环境。本文介绍如何使用 rollup 搭建一个脚手架工具。 脚手架工具的工作流程简言为：提供远端仓库…...
开发者视角下的鸿蒙
鸿蒙操作系统（HarmonyOS）是华为公司自主研发的一款面向未来、面向全场景的分布式操作系统。它旨在为用户提供一个无缝的智能生活体验，支持多种终端设备，如智能手机、平板电脑、智能穿戴设备、智能家居等。鸿蒙操作系统的出现&…...
docker基础命令
目录 1、docker拉取镜像 2、查看镜像 3、运行镜像 4、查看容器 5、停止、启动、容器和删除容器 6、进入容器 7、删除镜像 8、保存镜像 9、加载镜像 10、镜像标签 11、制作镜像 12、镜像上传 1、docker拉取镜像 docker pull 用户名/镜像名:tag不加tag(版本号) 即…...
订单日记为“惠采科技”提供全方位的进销存管理支持
感谢温州惠采科技有限责任公司选择使用订单日记！ 温州惠采科技有限责任公司，成立于2024年，位于浙江省温州市，是一家以从事销售电气辅材为主的企业。 在业务不断壮大的过程中，想使用一种既能提升运营效率又能节省成本…...
C++共享智能指针
C中没有垃圾回收机制，必须自己释放分配的内存，否则就会造成内存泄漏。解决这个问题最有效的方式是使用智能指针。 智能指针是存储指向动态分配(堆)对象指针的类，用于生存期的控制，能够确保在离开指针所在作用域时，自动…...
数学建模学习（138）：基于 Python 的 AdaBoost 分类模型
1. AdaBoost算法简介 AdaBoost(Adaptive Boosting)是一种经典的集成学习算法，由Yoav Freund和Robert Schapire提出。它通过迭代训练一系列的弱分类器，并将这些弱分类器组合成一个强分类器。算法的核心思想是：对于被错误分类的样本，在下一轮训练中增加其权重；对于正确分类…...
sqlite-vec一个SQLite3高效向量搜索扩展--JDBC环境使用
最近要用SQLite3，之前放出来了SQLiteUtile工具，方便操作。今天发现AIGC方面，RAG知识库需要使用向量数据库，来存储知识信息。一般呢都是用mysql，但无奈的是mysql就是不让用。突然又发现SQLite3有向量库扩展组件…...
Spark SQL操作
Spark SQL操作 文章目录 Spark SQL操作一、DataFrame的创建与保存1.前提操作2.数据准备3.创建4.保存DataFrame 二、DataFrame的操作1.printSchema2.show3.select4.filter5.groupBy(filed)6.sort(field) 三、临时表操作1.创建临时表2.通过临时表及SQL语句进行查询 四、从RDD转换…...
【大模型】LLaMA: Open and Efficient Foundation Language Models
链接：https://arxiv.org/pdf/2302.13971 论文：LLaMA: Open and Efficient Foundation Language Models Introduction 规模和效果 7B to 65B，LLaMA-13B 超过 GPT-3 (175B)Motivation 如何最好地缩放特定训练计算预算的数据集和模型大小&…...
聚焦AI存储，联想凌拓全力奔赴
【全球存储观察 ｜ 科技热点关注】 每一个时代，都有每一个时代的骄傲。 在信息化时代，NAS文件存储肩负着非结构化数据管理与存储的重任，NetApp以其创新实力，赢得了全球存储市场的极高声誉。 在数智化时代，…...
ansible常用模块
一.ansible常用模块 ansible [主机or组列表] -m 模块 -a "参数"1.shell:类似于在终端上直接输入命令,支持bash特性2.command(默认模块):使用的变量需要事先定义好,不支持bash特性，如管道、重定向3.script: 执行脚本,支持python,shell脚本4.file:用于在被控…...
window11编译pycdc.exe
一、代码库和参考链接 在对python打包的exe文件进行反编译时，会使用到uncompyle6工具，但是这个工具只支持python3.8及以下，针对更高的版本的python则不能反编译。 关于反编译参考几个文章： Python3.9及以上Pyinstaller 反编译教…...
C语言——break、continue、goto
目录 一、break 二、continue 1、在while循环中 2、在for循环中 三、go to 一、break 作用是终止循环，在循环内遇到break直接就跳出循环。 注： 一个break语句只能跳出一层循环。 代码演示： #include<stdio.h>void test01() {for (…...
实战OpenCV之人脸识别
基础入门 随着计算机视觉技术和深度学习的发展，人脸识别已经成为一项广泛应用的技术，涵盖了从安全监控、身份验证、智能家居到大型公共安全项目等多个领域。 人脸识别技术通常包括以下几个主要步骤。 图像采集：通过摄像头或其他图像采集设备，捕获包含人脸的图像或视频帧。 …...
记录第一次安装laravel项目
window系统 Laravel中文文档：https://laravel-docs.catchadmin.com/docs/11/getting-started/installation 1.使用composer安装全局laravel composer global require laravel/installer2.安装完成后在命令行输入laravel，如果报错：laravel不是…...
 - C 语言应用程序)
AWTK-WEB 快速入门(1) - C 语言应用程序
先安装 AWTK Designer 用 AWTK Designer 新建一个应用程序 2.1. 新建应用程序 这里假设应用程序的名称为 AwtkApplicationC，后面会用到，如果使用其它名称，后面要做相应修改。 在窗口上放置一个按钮将按钮的名称改为 “close”将按钮的文本改…...
《操作系统 - 清华大学》4 -5：非连续内存分配：页表一反向页表
文章目录 1. 大地址空间的问题2. 页寄存器（ Page Registers ）方案3. 基于关联内存(associative memory )的反向页表（inverted page table）4. 基于哈希（hashed）查找的反向页表5. 小结 1. 大地址空间的问题 …...
数据可视化复习1-Matplotlib简介属性和创建子图
1.Matplotlib简介 Matplotlib是一个Python的2D绘图库，它可以在各种平台上以各种硬拷贝格式和交互环境生成具有出版品质的图形。通过Matplotlib，开发者可以仅需要几行代码，便可以生成绘图、直方图、功率谱、条形图、错误图、散点图等。 以下…...
 】)
98. 验证二叉搜索树【 力扣(LeetCode) 】
文章目录 零、原题链接一、题目描述二、测试用例三、解题思路四、参考代码 零、原题链接 98. 验证二叉搜索树 一、题目描述 给你一个二叉树的根节点 root ，判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下： 节点的左子树只包含 小于 当…...
github中banch和tag的应用
GitHub 中的 Branch 和 Tag 之间的关系 在 GitHub 和 Git 中，**Branch（分支）**和**Tag（标签）**都是用来管理和标记代码的概念，但它们在版本控制中扮演不同的角色和有不同的用途。 --- 名词解释 1. 分支…...
鸿蒙HarmonyOS开发：一次开发，多端部署（工程级）三层工程架构
文章目录 一、工程创建1、先创建出最基本的项目工程。2、新建common、features、 products 目录 二、工程结构三、依赖关系1、oh-package.json52、配置ohpm包依赖 四、引用ohpm包中的代码1、定义共享资源2、在common模块index文件中导出3、在phone模块oh-package.json5文件中引…...
无插件H5播放器EasyPlayer.js视频流媒体播放器如何开启electron硬解码Hevc（H265）
在数字化时代，流媒体播放器技术正经历着前所未有的变革。随着人工智能、大数据、云计算等技术的融合，流媒体播放器的核心技术不断演进，为用户提供了更加丰富和个性化的观看体验。 EasyPlayer.js H5播放器，是一款能够同时支持HTTP、…...