记录分享一段网页弹出提示匡的JS代码并添加时间控制逻辑
<script>
document.addEventListener('DOMContentLoaded', function() {
// 检查是否在10分钟内已经关闭过弹窗
const lastClosedTime = localStorage.getItem('popupClosedTime');
if (lastClosedTime && (Date.now() - parseInt(lastClosedTime) < 600000)) {
return; // 10分钟内不重复弹出
}
// 创建弹窗容器
const popup = document.createElement('div');
popup.id = 'debug-popup';
popup.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 500px;
background-color: #fff;
border-radius: 6px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
z-index: 1000;
display: none;
overflow: hidden;
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
`;
// 弹窗头部（标题 + 关闭按钮）
const popupHeader = document.createElement('div');
popupHeader.style.cssText = `
position: relative;
padding: 8px 20px;
background-color: #3273dc;
color: white;
`;
// 标题
const popupTitle = document.createElement('h3');
popupTitle.textContent = '关于免费注册.eu.cc后缀活动上线公告';
popupTitle.style.cssText = `
margin: 0;
font-size: 18px;
font-weight: 600;
`;
// 关闭按钮（右上角）
const closeButton = document.createElement('button');
closeButton.innerHTML = '×';
closeButton.style.cssText = `
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 0 8px;
transition: opacity 0.2s;
`;
closeButton.onmouseover = () => closeButton.style.opacity = '0.7';
closeButton.onmouseout = () => closeButton.style.opacity = '1';
// 弹窗内容区域
const popupContent = document.createElement('div');
popupContent.innerHTML = `
<p style="margin: 0; padding:10px 20px;font-size: 16px; color: #666;text-indent:2em;">
所有本站注册用户均可参与免费注册.eu.cc后缀域名活动，费注册.eu.cc后缀是以领取全额抵扣券的形式发放到账户中。优惠券领取成功后有效
期为30天，逾期作废，不退不换。请注意使用时间，优惠券不支持转赠，仅限用户对应账户使用。<a href="/tld-eu-cc.html" title="免费注册.eu.cc后缀域
名" style="font-weight:bold;color:red;font-size: 16px;">点击立即注册</a>
</p>
<p style="text-align:right;margin-right:50px;font-size: 14px; padding:10px 20px;">JIANNAME.COM<br />2025年8月13日</p>
`;
// 组装弹窗
popupHeader.appendChild(popupTitle);
popupHeader.appendChild(closeButton);
popup.appendChild(popupHeader);
popup.appendChild(popupContent);
document.body.appendChild(popup);
// 添加动画
const style = document.createElement('style');
style.textContent = `
@keyframes popupFadeIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
#debug-popup { animation: popupFadeIn 0.3s ease-out; }
`;
document.head.appendChild(style);
// 显示弹窗
setTimeout(() => popup.style.display = 'block', 300);
// 点击关闭按钮
closeButton.addEventListener('click', function() {
// 记录关闭时间（10分钟内不再显示）
localStorage.setItem('popupClosedTime', Date.now().toString());
// 关闭动画
popup.style.animation = 'none';
popup.style.transition = 'opacity 0.2s';
popup.style.opacity = '0';
setTimeout(() => document.body.removeChild(popup), 200);
});
// 10分钟后自动清除记录（可选）
setTimeout(() => {
localStorage.removeItem('popupClosedTime');
}, 600000);
});
</script>时间控制逻辑：
使用
localStorage记录弹窗关闭时间再次打开页面时会检查是否在10分钟内（600000毫秒）关闭过
10分钟后自动清除记录（通过
setTimeout）用户体验优化：
关闭弹窗时立即记录时间，避免页面刷新时重复弹出
10分钟到期后自动重置，确保用户最终能看到重要通知
原有样式保留：
完全保留了你调整后的视觉样式
包括标题、内容格式、阴影效果等