本文介绍如何使用原生 JavaScript 实现一个简单的网页弹幕功能。通过获取输入框内容，动态创建元素并赋予随机颜色、高度及向左滚动的样式，利用定时器更新位置实现滚动效果。代码结构简洁，适合前端初学者学习 DOM 操作与基础动画原理。
弹幕效果简介与HTML结构
大家是否体会到，弹幕呈现出独特的观赏趣味！
尽管我个人对观看电视时出现的弹幕干扰持保留态度，但今日我们将构建一个简易的弹幕系统。其简化程度可参考以下演示效果：
从图示可见，该呆毛HTML结构极为精简。 仅包含一个div元素、一个input输入框以及一个button按钮。
<div id="box" class="box"></div>
<input type="text" id="txt" />
<button onclick="send()">提交内容</button>
首先展示JavaScript代码实现：
JavaScript 核心逻辑与实现
function $(str) {
return document.getElementById(str);
}
function send() {
var word = $('txt').value;
var span = document.createElement('span');
var top = parseInt(Math.random() * 500) - 20;
var color1 = parseInt(Math.random() * 256);
var color2 = parseInt(Math.random() * 256);
var color3 = parseInt(Math.random() * 256);
var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
top = top < 0 ? 0 : top;
span.style.position = 'absolute';
span.style.top = top + "px";
span.style.color = color;
span.style.left = '500px';
span.style.whiteSpace = 'nowrap';
var nub = (Math.random() * 10) + 1;
span.setAttribute('speed', nub);
span.speed = nub;
span.innerHTML = word;
$('box').appendChild(span);
$('txt').value = "";
}
setInterval(move, 200);
function move() {
var spanArray = $('box').children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left =
parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';
}
}
简要阐述其核心逻辑：
首先，获取input输入框中的文本内容，代码为var word = $('txt').value; 其次，需将该内容插入至负责滚动显示的div容器中，遵循三项基本原则：①颜色随机生成②垂直高度随机③与左侧边框的距离随时间动态变化； 最后，将生成的内容节点追加至div元素中 $('box').appendChild(span);
基于上述步骤分析，第二步的实现最为关键。
针对第一个原则的具体实现：
var color1 = parseInt(Math.random() * 256);
var color2 = parseInt(Math.random() * 256);
var color3 = parseInt(Math.random() * 256);
var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
span.style.color = color;
相关扩展知识：
RGB(R,G,B)色彩模式； R： 代表红色分量。取值范围为正整数或百分数 G： 代表绿色分量。取值范围为正整数或百分数 B： 代表蓝色分量。取值范围为正整数或百分数 此定义应易于理解。
针对第二个原则的具体实现：
var top = parseInt(Math.random() * 500) - 20;
top = top < 0 ? 0 : top;
span.style.top = top + "px";
针对第三个原则的具体实现：
span.style.left = '500px';
setInterval(move, 200);
function move() {
var spanArray = $('box').children;
for (var i = 0; i < spanArray.length; i++) {
spanArray[i].style.left =
parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';
}
}
此处运用了定时器机制，使left属性值发生实时变更。
至此，整体逻辑应当已清晰易懂。
本文所述内容至此结束，期望对各位的学习有所助益，同时也恳请大家继续支持本站。