当前位置：首页 > JavaScript

js实现公告

2026-04-05 18:24:33JavaScript

实现公告栏功能

使用JavaScript实现公告栏功能可以通过动态更新DOM元素内容或结合CSS动画实现滚动效果。以下是几种常见实现方式：

静态公告显示

创建一个固定位置的div元素，通过JavaScript动态更新内容：

// 创建公告元素
const notice = document.createElement('div');
notice.id = 'notice-board';
notice.style.position = 'fixed';
notice.style.top = '0';
notice.style.width = '100%';
notice.style.backgroundColor = '#ffeb3b';
notice.style.padding = '10px';
notice.style.textAlign = 'center';
document.body.prepend(notice);

// 更新公告内容
function updateNotice(message) {
    document.getElementById('notice-board').textContent = message;
}

// 使用示例
updateNotice('系统将于今晚23:00进行维护升级');

滚动公告实现

实现横向或纵向滚动公告效果：

// HTML结构需包含：
// <div class="notice-container">
//   <div class="notice-content">这里是滚动公告内容...</div>
// </div>

const container = document.querySelector('.notice-container');
const content = document.querySelector('.notice-content');
const speed = 50; // 像素/秒

function startScroll() {
    let distance = 0;
    const contentWidth = content.offsetWidth;

    setInterval(() => {
        distance -= 1;
        if (-distance >= contentWidth) {
            distance = container.offsetWidth;
        }
        content.style.transform = `translateX(${distance}px)`;
    }, 1000/60);
}

// 初始化
container.style.overflow = 'hidden';
content.style.whiteSpace = 'nowrap';
startScroll();

轮播公告实现

实现多条公告轮流显示：

const notices = [
    '第一条公告内容',
    '第二条重要通知',
    '第三条系统消息'
];
let currentIndex = 0;
const noticeElement = document.getElementById('notice-board');

function rotateNotice() {
    noticeElement.textContent = notices[currentIndex];
    currentIndex = (currentIndex + 1) % notices.length;
}

// 每5秒切换一次
setInterval(rotateNotice, 5000);
rotateNotice(); // 初始显示

带关闭按钮的公告

实现可关闭的公告栏：

js实现公告

// HTML结构示例：
// <div class="notice">
//   <span class="notice-message"></span>
//   <button class="close-btn">×</button>
// </div>

const notice = document.querySelector('.notice');
const messageEl = document.querySelector('.notice-message');
const closeBtn = document.querySelector('.close-btn');

function showNotice(msg) {
    messageEl.textContent = msg;
    notice.style.display = 'block';
}

closeBtn.addEventListener('click', () => {
    notice.style.display = 'none';
});

// 使用示例
showNotice('这是一条可关闭的公告');