js如何实现开屏弹窗

开屏弹窗是什么,其实就是第一次登录后进入页面给你的一种公告提示,此后再回到当前这个页面时弹窗是不会再出现的。也就是说这个弹窗只会出现一次。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>开屏alert</title><script src="js/jquery-3.7.1.min.js"></script><style>* {margin: 0;padding: 0;}.big {width: 100%;height: 100vh;background-image: url('img/WIN_20240308_14_38_12_Pro.jpg');background-size: 100%;background-repeat: repeat;}.big_item {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.item {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.7);}.text {padding: 20px 10px;border-radius: 25px;width: 80%;display: flex;flex-direction: column;justify-content: center;height: 60%;background-color: #ffffff;}.text p {margin-left: 2%;padding-bottom: 20px;font-size: 18px;}.yes {width: 80%;height: 10vh;border-radius: 50px;background-color: #ffc413;margin-left: 10%;color: #ffffff;display: flex;justify-content: center;align-items: center;}</style></head><body><div class="big"><div class="big_item"><div class="item"><div class="text"><p> 考公考编时,才读懂《范进中举》;找工作时,才读懂《孔乙己》;谈婚论嫁时,才读懂《孔雀东南飞》;十五六岁的我在地理试卷上写下:“此地的优势在于其丰富的廉价劳动力,十年后的我审视着下班后的疲惫自己,一颗子弹正中眉心”;毕业后,站在讲台上成为一名教师,当我说出那句“学习是给你们自己学的,不是给我学的,才陡然明白我叫不醒他们,就像当年的老师叫不醒曾经的我们一样。也完美诠释了,教育具有长期性和滞后性,就像是一个闭环,多年后你有一个瞬间突然意识到什么,那就是子弹命中的瞬间。此时,才是教育的完成”不过花有重开日,人无少年时。我特别喜欢一段话;我们不能站在现在高度去批判当年的自己,这不公平,如果能重来一次,以当年的阅历和心理,还是会做出同样的选择。那么,不如放过自己和过去的你和解吧!教育是具有滞后性的,只有到了一定年纪有了感悟才会明白教育是会闭环的。以前高中上地理课,分析一个城市的区位优势,有一条一定要写“劳动力丰富低廉”。多年后大学毕业,拿着三千多的工资拿命熬夜加班,才真正理解劳动力到底有多廉价。小的时候觉得刻舟求剑是讽刺,长大之后才知道他的悲剧内核是遗憾,所以黄庭坚才写“往事刻舟求坠剑,怀人挥泪著亡簪”小时候会觉得怎么会有人做出掩耳盗铃这种傻事?长大之后才知道你我皆凡人,自欺欺人说到底也不过是一种自保。当失去至亲才知道《陈情表》中“臣无祖母无以至今日,祖母无臣无以终余年”这背后的深情。亲人的离世,不是一场暴雨,而是一生的潮湿。当面对和周围人的巨大差距,才知道《送东阳马生序》中“余则匀袍蔽衣处其间,略无慕羡意”这需要不断地修行,才能长出强大的自信。当独自闯荡社会才知道《记承天寺夜游》中“但少闲人如吾两人者尔”浪漫难觅,知己难求。可贵的不是那晚的月光,而是月光下推心置腹的我们。当时过境迁,所有的付出都有了结果,才知道《早发白帝城》中“两岸猿声啼不住,轻舟已过万重山”功不唐捐,命运最终会嘉奖每一个相信天道酬勤的人。</p><div class="yes" onclick="yes()">确定</div></div></div></div></div><script>// 声明一个变量let status;// 设置一个自执行函数(function() {// 判断存储取的值等于1if (sessionStorage.getItem("status") == 1) {// 成立就隐藏$(".big_item").css("display", "none");} else {$(".big_item").css("display", "block");}}())// 点击确定的点击事件function yes() {// 给这个变量赋值status = 1;// 并将此变量使用临时存储存起来sessionStorage.setItem("status", 1);// 并将弹窗隐藏$(".big_item").css("display", "none");}</script></body>
</html>

开屏弹窗步骤就很简单:
声明一个全局变量,给弹窗的确定绑定点击事件,点击确定,给声明的变量赋值为1,并使用临时存储存起来,然后将弹窗隐藏,设置自执行定时器,判断取的临时存储的值等于1时将弹窗隐藏,否则就让弹窗显示;

最主要的就是存取值而已!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/31053.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【绝对有用】C++ vector const函数和右值移动

std::vector 是 C 标准库中的动态数组&#xff0c;提供了许多方便的函数来操作数组。以下是 std::vector 的常用函数及其使用方法&#xff1a; 构造函数 vector()&#xff1a;默认构造函数&#xff0c;创建一个空的 vector。vector(size_t n)&#xff1a;创建一个包含 n 个默…

索引和深分页优化案例

一、初始状态没加索引 总数据100w左右 浅分页 查询10条需要1.5s左右 select * from timer_task where app hzhXtimer order by run_timer limit 0,10深分页查询10条需要1.7s左右 select * from timer_task where app hzhXtimer order by run_timer limit 100000,10看执…

视频采集概念

视频采集通常指的是将视频信号从视频源&#xff08;如摄像头、视频播放器等&#xff09;捕获并转换为数字格式&#xff0c;以便于计算机处理和存储。 步骤&#xff1a; 视频信号捕获&#xff1a;通过摄像头、网络摄像头、视频采集卡等设备将视频信号捕获。 信号转换&#xff…

【diffusers极速入门(三)】生成的图像尺寸与 UNet 和 VAE 之间的关系

先上结论&#xff0c;一句话总结即&#xff1a; SD 图片的输入\输出尺寸&#xff08;高或宽&#xff09; Unet 输入\输出的样本尺寸&#xff08;高或宽&#xff09; x VAE 的缩放尺寸 在使用生成模型时&#xff0c;特别是图像生成任务中&#xff0c;理解 UNet 和 VAE&#xf…

【CPP】选择排序:冒泡排序、快速排序

目录 1.冒泡排序简介代码分析 2.快速排序2.1霍尔版本简介代码分析 2.2挖坑版本2.3前后指针版本2.4非递归的快排思路代码 什么是交换排序&#xff1f; 基本思想&#xff1a;所谓 交换&#xff0c;就是根据序列中两个记录键值的比较结果来对换这两个记录在序列中的位置&#xff0…

[BUUCTF从零单排] Web方向 01.Web入门篇之粗心的小李解题思路

这是作者新开的一个专栏《BUUCTF从零单排》&#xff0c;旨在从零学习CTF知识&#xff0c;方便更多初学者了解各种类型的安全题目&#xff0c;后续分享一定程度会对不同类型的题目进行总结&#xff0c;并结合CTF书籍和真实案例实践&#xff0c;希望对您有所帮助。当然&#xff0…

对比分析:GBDT、XGBoost、CatBoost和LightGBM

对比分析&#xff1a;GBDT、XGBoost、CatBoost和LightGBM 梯度提升决策树&#xff08;GBDT&#xff09;是当前机器学习中常用的集成学习方法之一&#xff0c;它通过集成多个弱学习器&#xff08;通常是决策树&#xff09;来构建强学习器。GBDT在分类和回归任务中表现优异&…

微软Azure AI更新视频翻译和语音翻译 API 功能!企业适用TTS文本转语音

很高兴与大家分享 Azure AI 语音翻译产品套件的两个重大更新&#xff01; 分别是视频翻译和增强的实时语音翻译 API。 视频翻译&#xff08;批量&#xff09; 微软宣布推出视频翻译预览版&#xff0c;这是一项突破性的服务&#xff0c;旨在改变企业本地化视频内容的方式。 随着…

微博舆情分析系统可以继续完善的基于python 前端vue

微博舆情分析系统可以继续完善的&#xff0c;前后端分离&#xff0c;前端基于vue 后端基于python的flask可以说是非常的简洁&#xff0c;支持实时更新数据。界面如图 主要工作点体现在后端实时更新数据跟数据的处理方面上&#xff0c;后续有空会用hadoop来处理海量数据真…

刷题——找到对应数组目标值的下标

二分查找-I_牛客题霸_牛客网 方法一&#xff1a;遍历找目标值 int search(vector<int>& nums, int target) {// write code herefor(int i 0; i < nums.size(); i) {if(target nums[i]) {return i; // 返回目标值在数组中的索引}}return -1; // 如果找不到目…

C++语法07 程序中的除法和求余

程序中的除法 int / int int double / int double int / double double double / double double 规律总结 只要除号任意一边出现了double类型&#xff0c;结果就是double类型 只有除号两边都是int类型&#xff0c;结果才是int类型 这个规律也适用于加法减法和乘法 …

用国内首家文生软件平台生成一个整蛊拼图小游戏是什么体验?

前言&#xff1a; 众所周知&#xff0c;2023年是中国大模型发展的元年&#xff0c;以ChatGPT3.5为代表的初代语言大模型横空出世&#xff0c;直接掀起了一阵全球范围内的AIGC浪潮。 在中国大模型追星赶月的这一年&#xff0c;技术迭代日新月异&#xff0c;行业趋势不断变化&a…

IIS配置網站登錄驗證,禁止匿名登陸

需要維護一個以前的舊系統&#xff0c;這個系統在內網運行&#xff0c;需要抓取電腦的登陸賬號&#xff0c;作為權限管理的一部分因此需要在IIS配置一下

基于可视化设计的低代码开发分析与应用探讨

随着数字化时代的到来&#xff0c;越来越多的企业开始关注低代码开发。低代码开发作为一种快速应用开发模式&#xff0c;能够显著提高企业生产力。本文以可视化设计为核心&#xff0c;对低代码开发的原理、技术架构、应用场景及挑战进行分析&#xff0c;旨在为我国低代码产业的…

线性代数|机器学习-P16矩阵A的导数

文章目录 1. 概述2. 求 d A − 1 ( t ) d t \frac{\mathrm{d}A^{-1}(t)}{\mathrm{d}t} dtdA−1(t)​3. 求 d λ ( t ) d t \frac{\mathrm{d}\lambda(t)}{\mathrm{d}t} dtdλ(t)​3.1 A 和 A T A^T AT有相同的特征值3.2 特征向量单位化3.3 求 λ ( t ) \lambda(t) λ(t) 1. 概述…

芯片验证7个月经验总结

1.芯片验证的工作相对软件开发的工作来说&#xff0c;容错率是要低不少的&#xff0c;主要体现在debug的时间上&#xff0c;软件编译几分钟就可以了&#xff0c;芯片仿真短则几十分钟&#xff0c;长的要几小时甚至几天&#xff0c;如果靠编译去发现问题 效率会非常低&#xff0…

Nature正刊!亚利桑那大学博士生陈舒立一作兼通讯最新成果!揭示亚马逊雨林干旱响应的生物地理学机制

2024年6月19日&#xff0c;国际知名学术期刊《Nature》发表了一项美国亚利桑那大学Scott Saleska教授团队的最新成果“Amazon forest biogeography predicts resilience and vulnerability to drought”。通过将森林样地调查数据与遥感观测相结合系统揭示了亚马逊雨林干旱响应的…

网络编程(六)TCP并发服务器

文章目录 &#xff08;一&#xff09;概念&#xff08;二&#xff09;TCP并发服务器&#xff08;三&#xff09;使用多线程实现TCP并发服务器1. 思路2. 注意点3. 代码实现 &#xff08;四&#xff09;使用多进程实现TCP并发服务器1. 思路2. 注意点3. 代码实现4. 关于子进程结束…

2)如何去构建记忆宫殿辅助记忆

构建记忆宫殿 记忆方式构建记忆宫殿后记 记忆方式 记忆方法多种多样&#xff0c;旨在帮助人们更有效地编码、储存和回忆信息。以下是一些常用和有效的记忆方法&#xff1a; 1.联想记忆法&#xff1a;通过将新信息与已知信息或图像进行创意性联想来加深记忆。例如&#xff0c;将…

机器学习——RNN、LSTM

RNN 特点&#xff1a;输入层是层层相关联的&#xff0c;输入包括上一个隐藏层的输出h1和外界输入x2&#xff0c;然后融合一个张量&#xff0c;通过全连接得到h2&#xff0c;重复 优点&#xff1a;结构简单&#xff0c;参数总量少&#xff0c;在短序列任务上性能好 缺点&#x…