当前位置：首页 > JavaScript

js实现公告

2026-03-14 00:13:53JavaScript

实现公告栏的 JavaScript 方法

滚动公告栏

使用 marquee 标签或通过 JavaScript 实现滚动效果。以下是纯 JavaScript 实现方案：

const announcement = document.getElementById('announcement');
let position = 0;

function scrollAnnouncement() {
  position -= 1;
  announcement.style.transform = `translateX(${position}px)`;

  if (position <= -announcement.offsetWidth) {
    position = window.innerWidth;
  }
  requestAnimationFrame(scrollAnnouncement);
}

scrollAnnouncement();

HTML 结构：

<div class="announcement-container">
  <div id="announcement">重要公告：系统将于今晚 20:00 进行维护升级</div>
</div>

CSS 样式：

.announcement-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
#announcement {
  display: inline-block;
  padding: 10px;
}

定时切换公告

通过数组存储多条公告，定时切换显示：

js实现公告

const announcements = [
  "新用户注册立享 50 元优惠券",
  "双十一活动预热开始",
  "系统维护通知：本周六 0:00-6:00"
];
let currentIndex = 0;
const announcementElement = document.getElementById('announcement');

function rotateAnnouncements() {
  currentIndex = (currentIndex + 1) % announcements.length;
  announcementElement.textContent = announcements[currentIndex];
}

setInterval(rotateAnnouncements, 3000);

带关闭按钮的公告栏

实现可关闭的公告栏组件：

document.getElementById('close-announcement').addEventListener('click', function() {
  document.getElementById('announcement-bar').style.display = 'none';
});

HTML 结构：

js实现公告

<div id="announcement-bar" class="announcement-bar">
  <span>紧急：服务器迁移可能导致短暂服务中断</span>
  <button id="close-announcement">×</button>
</div>

CSS 样式：

.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ff6b6b;
  color: white;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#close-announcement {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

本地存储控制公告显示

使用 localStorage 控制公告显示频率：

if (!localStorage.getItem('announcementDismissed')) {
  document.getElementById('announcement').style.display = 'block';
}

document.getElementById('dismiss').addEventListener('click', function() {
  document.getElementById('announcement').style.display = 'none';
  localStorage.setItem('announcementDismissed', 'true');
});

响应式公告组件

结合 CSS 媒体查询和 JavaScript 实现响应式公告：

function checkScreenSize() {
  const announcement = document.getElementById('announcement');
  if (window.innerWidth < 768) {
    announcement.textContent = "移动端公告：APP下载享特权";
  } else {
    announcement.textContent = "桌面端公告：新版本已发布";
  }
}

window.addEventListener('resize', checkScreenSize);
checkScreenSize();