当前位置：首页 > JavaScript

js公告系统的实现

2026-04-04 16:43:45JavaScript

公告系统的实现（JavaScript）

公告系统通常用于网站或应用中展示重要通知、更新或提示信息。以下是基于JavaScript的公告系统实现方法：

基础HTML结构

创建公告容器和关闭按钮：

<div id="announcement" class="announcement">
  <div class="announcement-content">
    <span>这是重要公告内容</span>
    <button id="close-btn">×</button>
  </div>
</div>

CSS样式设计

为公告添加基本样式：

.announcement {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f8f9fa;
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
}

.announcement-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

#close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

JavaScript功能实现

基本交互功能：

document.addEventListener('DOMContentLoaded', function() {
  const announcement = document.getElementById('announcement');
  const closeBtn = document.getElementById('close-btn');

  // 检查本地存储是否已关闭公告
  if(localStorage.getItem('announcementClosed') !== 'true') {
    announcement.style.display = 'block';
  }

  // 关闭公告并设置本地存储
  closeBtn.addEventListener('click', function() {
    announcement.style.display = 'none';
    localStorage.setItem('announcementClosed', 'true');
  });
});

高级功能扩展

多公告轮播：


let currentAnnouncement = 0;
const announcements = [
"公告1: 系统维护通知",
"公告2: 新功能上线",
"公告3: 节日优惠活动"
];

function rotateAnnouncements() { const content = document.querySelector('.announcement-content span'); content.textContent = announcements[currentAnnouncement]; currentAnnouncement = (currentAnnouncement + 1) % announcements.length; }

setInterval(rotateAnnouncements, 5000);


2. 带时效的公告：
```javascript
// 检查公告是否过期
const announcementExpiry = '2023-12-31';
const currentDate = new Date().toISOString().split('T')[0];

if(currentDate <= announcementExpiry) {
  announcement.style.display = 'block';
}

从服务器获取公告：

fetch('/api/announcements')
.then(response => response.json())
.then(data => {
 if(data.active) {
   document.querySelector('.announcement-content span').textContent = data.message;
   announcement.style.display = 'block';
 }
});

响应式设计改进

添加媒体查询适应不同屏幕：

@media (max-width: 768px) {
  .announcement {
    padding: 8px 5px;
    font-size: 14px;
  }

  #close-btn {
    font-size: 16px;
  }
}

可访问性增强

添加ARIA属性：

js公告系统的实现

<div id="announcement" class="announcement" role="alert" aria-live="polite">
  <div class="announcement-content">
    <span id="announcement-text">这是重要公告内容</span>
    <button id="close-btn" aria-label="关闭公告">×</button>
  </div>
</div>

以上实现可根据实际需求进行组合和扩展，创建适合不同场景的公告系统。