分享一个好看的圆角ui时尚公告弹窗代码
效果
代码
<!-- 弹窗代码开始 -->
<div id = "hello" style="display: none">
<div class="web_notice" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;">
<div style="position: fixed;top: 50%;left: 50%;width: 500px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
<h3 style="font-weight: bold;text-align: center;font-size: 30px;
">⚠️必看公告⚠️</h3>
<div style="font-size: 16px;margin-top: 26px;line-height: 30px;color: #999;
"><p style="text-align:center;"><span style="font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif; text-align: var(--bs-body-text-align);"><font style="" size="2"><b>P12</b></font><font color="#000000" style="font-size: 13.28px; font-weight: bold;">没有系统限制</font><font color="#c24f4a" style="font-size: 13.28px; font-weight: bold;">测试</font></span><span style="color: rgb(249, 150, 59); font-size: small; font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif;">测试</span></p><ul><li><b><font color="#c24f4a">⚠️不得利用代码用于任何违法行为，否则一切后果由使用者本人承担，使用即视为同意上述条件，否则切勿使用。</font></b>⚠️</li><li>📖记得查看说明与教程！</li></ul><ul><li><p>遇到问题请联系客服<p>测试</div>
<a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin: 0 auto;margin-top: 45px;border-radius: 32px;width: 80%;" onclick="javascript:document.querySelector('.web_notice').remove()">我知道了</a>
</div>
</div>
</div>
<script>
window.onload = function () {
if(document.cookie.indexOf("user=newpop")==-1){
//弹出弹窗界面
var text = document.getElementById("hello");
text.setAttribute("style", "display: inline;");
var t=new Date(new Date().getTime()+ parseInt()*1000*60);
document.cookie="user=newpop; expires="+t.toGMTString();
}else{
}
}
</script>
<!-- 弹窗代码结束 -->代码解释
其中的 JavaScript 代码主要是在页面加载时检查用户是否已经访问过该网站，并且根据此信息决定是否弹出一个界面。
下面是对代码的详细解释：
1. window.onload = function () {...}:
- 这行代码意味着当网页所有内容（包括图片、CSS、脚本等）完全加载完成后，所定义的函数会执行。
2. if(document.cookie.indexOf("user=newpop")==-1){...}:
- 这里检查浏览器的
document.cookie中是否包含字符串"user=newpop"。 document.cookie是一个字符串，包含所有当前页面的 cookies 信息。indexOf("user=newpop")用来查找字符串"user=newpop"是否存在。如果返回-1，说明不存在这个 cookie。- 如果 cookie 不存在，说明这是用户首次访问网站或者 cookie 已过期，那么接下来的代码就会执行。
3. 弹出界面部分:
var text = document.getElementById("hello");
text.setAttribute("style", "display: inline;");- 这部分代码会通过
getElementById("hello")获取页面中id="hello"的 HTML 元素。 - 然后通过
setAttribute("style", "display: inline;")将该元素的 CSS 样式改为display: inline;，使其显示出来。通常这个元素可能原本是隐藏的，通过这行代码就会显示出来，通常用于弹窗或提示。
4. 设置 cookie:
var t = new Date(new Date().getTime() + parseInt() * 1000 * 60);
document.cookie = "user=newpop; expires=" + t.toGMTString();- 这行代码用于设置一个 cookie，名为
"user"，值为"newpop"。它的过期时间是t，表示用户将在一定时间内被标记为已访问过网站。 new Date().getTime()获取当前的时间戳（单位是毫秒），然后通过parseInt()（看起来这里应该有参数传入）进行加上一个一定的时间，表示 cookie 的过期时间。- 但是这里
parseInt()是空的，应该是一个具体的数值（比如：parseInt(30)，表示30分钟），所以这段代码可能存在一个 bug。
5. else {}:
- 如果 cookie 中已经存在
"user=newpop"，即用户之前访问过网站，这里的else代码块什么也不做，表示不再弹出任何提示。
总结：
- 这段代码的目的是：当用户首次访问页面时，弹出一个界面（通过显示
id="hello"的元素），并设置一个 cookie 来标记用户已访问过该网站。下次用户再访问时，界面不会弹出，因为会检测到 cookie 的存在。
需要注意的是，这段代码有一个潜在的 bug，就是 parseInt() 没有提供参数，应该传入一个数值（例如时间长度）来计算 cookie 的过期时间。例如parseInt(5)，表示5分钟