js怎么实现文本显示的公告栏

lewis 6年前 (2019-02-02) 阅读数 10 #程序编程

文章标签 js

在JavaScript中，可以使用DOM操作来实现文本显示的公告栏。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
<title>公告栏</title>
<style>
.notice {
width: 400px;
height: 200px;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="notice">
<marquee id="noticeText" behavior="scroll" direction="left"></marquee>
</div>
<script>
var noticeText = document.getElementById('noticeText');
var notices = ['公告1', '公告2', '公告3']; // 公告内容数组
function showNotice() {
var index = 0;
setInterval(function() {
noticeText.textContent = notices[index];
index = (index + 1) % notices.length;
}, 3000); // 每隔3秒切换一条公告
}
showNotice();
</script>
</body>
</html>

在上面的示例中，使用marquee标签来实现公告栏的滚动效果。JavaScript部分定义了一个showNotice函数，用于循环显示公告内容数组中的元素。使用setInterval定时器每隔3秒切换一条公告内容，直到所有公告都显示完毕。

注意，marquee标签在HTML5中已被废弃，不推荐使用。可以使用CSS的animation属性来代替实现滚动效果。