首先是css样式
<style> * { padding: 0; margin: 0; } #banner { width: 100%; height: 100vh; background-color: gray; position: relative; } #alert { width: 55%; height: 800px; background-color: aliceblue; position: absolute; left: 24%; top: 20vh; display: flex; align-items: center; } #alert img { top: -120px; left: 490px; height: 100px; position: absolute; } #alert p { font-size: 80px; width: 100%; text-align: center; } #k{ width: 50%; height: 400px; margin-left: 25%; margin-top: 40vh; } #k p{ font-size: 50px; text-align: center; } </style>
然后是html样式
<div id="banner"> <div id="alert"> <p>等一下</p> <i onclick="fn()"><img src="./img/错误提示.svg" alt=""></i> </div> </div> <div id="k"> <p>恭喜发财</p> </div>
最后是js样式
<script> //获取到id let a = document.getElementById('alert'); let b = document.getElementById('banner'); //点击切换display function fn() { sessionStorage.setItem('a', true); a,b.style.display = 'none' } //向临时储存里存一个值 let data = sessionStorage.getItem('a') //判断是否有值 if (data != null) { a,b.style.display = 'none' } </script>