通过本地存储来控制一个div来显示或关闭

发布时间:2024年01月08日

这是一个JavaScript脚本,它通过操作HTML元素来隐藏或显示页面中的提示信息。脚本中使用了sessionStorage来存储一个名为"num"的值,当这个值为"aaa"时,提示信息会被隐藏,否则显示。而点击一个名为"delete"的按钮后,会将"num"的值设为"aaa",并隐藏提示信息。

请注意,这段代码需要在页面中存在一个ID为"hint"的HTML元素以及一个ID为"delete"的按钮元素才能正常工作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#hint {
				width: 50%;
				height: 400px;
				background-color: #ffff00;
				position: fixed;
				display: none;
				margin-left: 25%;
				top: 100px;
				border-radius: 25px;
			}

			body {
				background-color: #00fff0;
			}

			#delete {
				width: 50%;
				height: 10%;
				line-height: 0px;
				border-radius: 25px;
				padding: 20px;
				margin-left: 25%;
				text-align: center;
			}

			h3 {
				text-align: center;
			}

			p {
				text-indent: 33px;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="hint">
			<h3>公告</h3>
			<p内容实例</p>
			<button id="delete">确定</button>
		</div>
	</body>
	<script>
		let hint = document.getElementById('hint');
		// 获取页面中 ID 为 hint 的 HTML 元素,然后将其赋值给变量 hint
		let deletes = document.getElementById('delete');
		// 获取页面中 ID 为 delete 的 按钮元素,然后将其赋值给变量 deletes
		if (sessionStorage.getItem('num') === 'aaa') {
			// 如果 sessionStorage 中的 num 为 true,则隐藏 hint 元素
			hint.style.display = 'none';
		} else {
			// 否则显示 hint 元素
			hint.style.display = 'block';
		}

		deletes.onclick = function() {
			// 点击 deletes 元素后,将 num 的值设置为 true
			sessionStorage.setItem('num', 'aaa');
			hint.style.display = 'none';
		}
	</script>

</html>

文章来源:https://blog.csdn.net/IKUNzhenin/article/details/135449917
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。