开屏弹窗制作

最新推荐文章于 2024-11-18 14:11:03 发布

派大鑫的工作室

最新推荐文章于 2024-11-18 14:11:03 发布

阅读量176

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Cc040909/article/details/140250987

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>昭告天下</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.flex {
			width: 412px;
			opacity: 0.7;
			height: 660px;
			position: fixed;
			/* display: none; */
			background-color: black;
		}

		.box {
			width: 80%;
			height: 450px;
			margin-top: 30%;
			margin-left: 10%;
			border-radius: 15px;
			background-color: whitesmoke;
		}

		.notice {
			width: 100%;
			height: 35px;
			font-size: 25px;
			font-weight: 900;
			text-align: center;
		}

		.content {
			width: 100%;
			height: 370px;
			margin-top: 5%;
			font-size: 12px;
		}


		.yes {
			width: 20%;
			margin-left: 35%;
			border-radius: 50px;
			background-color: orange;
		}
	</style>
	<body>
		<div class="flex">
			<div class="box">

				<div class="notice">
					公告
				</div>

				<div class="content">
					<p>《原神》官方公告<br></p>

					1. 卡维生日活动开启<br>
					- 时间：2024年7月9日-2024年7月18日<br>
					- 活动名称：「馥郁幻想」网页活动<br>
					- 奖励：参与可得原石等奖励<br>

					2. 妮露头像征集活动开启<br>
					- 时间：2024年7月8日-2024年8月5日<br>
					- 活动名称：「莲光落舞筵」<br>
					- 奖励：原石、周边、创作币、头像挂件等<br>

					3. 版本更新说明<br>
					当前版本：4.7版本「纺坠终久之梦」<br>
					更新内容：全新常驻战斗玩法「幻想真境剧诗」已经上线，游戏内提供了玩法的基础规则、奖励和排期。<br>

					4. 其他活动<br>
					祈愿活动：「神铸赋形」「众水的颂诗」「柔柔海露心」等活动祈愿已开启,特定武器和角色的出现概率上升。<br>

					5.游戏工具与资源。官方提供了原神大地图、观测枢、冒险互助、卡牌广场、战绩、养成计算器等工具，方便玩家更好地体验游戏。。官方壁纸、同人图、游戏攻略等资源也在持续更新中，供玩家查阅。<br>
					6.角色PV与动画短片
				</div>
				<button class="yes">确定</button>
			</div>
		</div>


		<script>
			let button = document.getElementsByClassName('yes')[0];
			let boxs = document.getElementsByClassName('flex')[0];
			if (sessionStorage.getItem('zxq') == 8) {
				boxs.style.display = 'none';
			} else {
				boxs.style.display = 'block';
			}

			button.onclick = function() {
				sessionStorage.setItem('zxq', 8);
				boxs.style.display = 'none';

			}
		</script>

		<!-- <script>
			let but = document.getElementsByClassName('yes')[0];
			let box = document.getElementsByClassName('flex')[0];
			document.cookie = "name=张乾乾";
			document.cookie = "age=250";
			let msg = document.cookie;
			console.log(msg)

			function cookieToJson() {
				let cookieArr = document.cookie.split(";");
				let obj = {}
				cookieArr.forEach((i) => {
					let arr = i.split("=");
					obj[arr[0]] = arr[1];
				});
				return obj
			}
			console.log(cookieToJson());
		</script> -->
	</body>
</html>