利用AI写了一个镶嵌在自己网站的公告代码

<!-- 公告弹窗 -->

<div id="announcement-modal" class="announcement-modal">

  <div class="announcement-content">

    <button id="close-announcement" class="close-btn">&times;</button>

    <div class="announcement-header">

      <h3>重要公告</h3>

    </div>

    <div class="announcement-body">

      <p>欢迎访问我们的网站！近期我们完成了系统升级，新增了多项实用功能，使用体验将更加流畅。如有任何问题，请联系客服。</p>

      <!-- 你可以修改这里的公告内容 -->

    </div>

    <div class="announcement-footer">

      <button class="confirm-btn">我知道了</button>

    </div>

  </div>

</div>

<style>

.announcement-modal * {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

}

.announcement-modal {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 9999;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0.3s ease;

}

.announcement-modal.show {

  opacity: 1;

  visibility: visible;

}

.announcement-content {

  background-color: #ffffff;

  width: 90%;

  max-width: 500px;

  border-radius: 12px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

  overflow: hidden;

  position: relative;

  transform: translateY(-20px);

  transition: transform 0.3s ease;

}

.announcement-modal.show .announcement-content {

  transform: translateY(0);

}

.close-btn {

  position: absolute;

  top: 15px;

  right: 15px;

  background: none;

  border: none;

  font-size: 24px;

  color: #666666;

  cursor: pointer;

  width: 30px;

  height: 30px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 50%;

  transition: background-color 0.2s ease;

  z-index: 10;

}

.close-btn:hover {

  background-color: #f5f5f5;

  color: #333333;

}

.announcement-header {

  background-color: #4096ff;

  color: white;

  padding: 20px 25px;

}

.announcement-header h3 {

  font-size: 18px;

  font-weight: 600;

}

.announcement-body {

  padding: 25px;

  color: #333333;

  line-height: 1.6;

}

.announcement-body p {

  font-size: 14px;

  margin-bottom: 0;

}

.announcement-footer {

  padding: 15px 25px;

  background-color: #f8f9fa;

  text-align: right;

}

.confirm-btn {

  background-color: #4096ff;

  color: white;

  border: none;

  padding: 8px 20px;

  border-radius: 6px;

  cursor: pointer;

  font-size: 14px;

  transition: background-color 0.2s ease;

}

.confirm-btn:hover {

  background-color: #337ecc;

}

@media (max-width: 480px) {

  .announcement-content {

    width: 95%;

  }

  .announcement-header {

    padding: 15px 20px;

  }

  .announcement-body {

    padding: 20px;

  }

  .announcement-footer {

    padding: 15px 20px;

  }

}

</style>

<script>

// 公告弹窗核心逻辑

document.addEventListener('DOMContentLoaded', function() {

  const modal = document.getElementById('announcement-modal');

  const closeBtn = document.getElementById('close-announcement');

  const confirmBtn = document.querySelector('.confirm-btn');

  // 从localStorage获取关闭时间

  const closeTime = localStorage.getItem('announcementClosedTime');

  const now = new Date().getTime();

  const thirtyMinutes = 30 * 60 * 1000; // 30分钟的毫秒数

  // 判断是否需要显示弹窗：没有关闭记录 或 关闭时间已超过30分钟

  if (!closeTime || (now - closeTime) > thirtyMinutes) {

    modal.classList.add('show');

  }

  // 关闭弹窗的通用函数

  function closeModal() {

    modal.classList.remove('show');

    // 记录关闭时间到localStorage

    localStorage.setItem('announcementClosedTime', new Date().getTime().toString());

  }

  // 绑定关闭按钮事件

  closeBtn.addEventListener('click', closeModal);

  confirmBtn.addEventListener('click', closeModal);

  // 可选：点击遮罩层关闭弹窗

  modal.addEventListener('click', function(e) {

    if (e.target === modal) {

      closeModal();

    }

  });

});

</script>