• js如何实现开屏弹窗

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

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

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

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

  • 相关阅读:
    全世界流浪的程序员，用最原始的技术，每月赚17.6万美元！
    leetcode 1884-鸡蛋掉落-两枚鸡蛋
    mysql基于Spring boot开发电子宿舍管理系统毕业设计源码132056
    基于Laravel封装一个强大的请求响应日志记录中间件
    企业级通用低代码开发平台——一二三应用开发平台发布4.2开源版本，回顾与展望
    行业发展解读：互联网人，如何“变道”自动驾驶？
    Packet Tracer - 使用 Traceroute 发现网络
    Rocketmq--消息发送和接收演示
    Linux-0.11 boot目录bootsect.s详解
    信泰如意享七金版养老年金保险怎么样，好不好？
  • 原文地址：https://blog.csdn.net/2301_79420857/article/details/139842904