现在许多直播软件和视频都有弹幕功能，让我们来看看并分析是怎么实现的。
这边我主要分析下js的代码，想看源码的朋友送上链接，http://sandbox.xinfan.org/xdd...
html代码如下（css代码就不展示了，想看的直接看源码吧）：
<div id="main" class="container">
<p class="p0">啦啦啦啦啦啦啦</p>
<p class="p1">啦啦啦啦啦啦啦</p>
</div>
<div class="footer">
<input id="ipt" class="ipt" type="text" placeholder="说点什么?"/>
<button id="launch" class="launch" type="button" onclick="Leave()">发射</button>
<button id="clear" class="clear" type="button">清屏</button>
</div>
</div>
JS代码如下：
var num = 2;
//声明了num=2
var _p = document.getElementsByTagName("p");
//获取标签p.
var main = document.getElementById("main");
//获取Id为mian的标签
function Leave(){
var colors = ["red","orange","yellow","pink","green"];
//储存5个颜色
var ipt = document.getElementById("ipt");
//获取id为ipt的标签
var launch = document.getElementById("launch");
//获取id为launch的标签
var creat_p = document.createElement("p");
//创建一个p标签
main.appendChild(creat_p).innerText = ipt.value;
//往main子集放一个p标签并且p标签的文本为ipt的值
ipt.value = "";
//初始化ipt
creat_p.className = "p" + num;
//创建的p标签设置class为p2,p3,p4以此类推
num++;
//执行一次加上1.
var _ran = Math.floor(Math.random()*1000);
//声明个0-999的随机数.
var F_ran = Math.floor(Math.random()*5)+15;
//声明个15-19随机数
var T_ran = _ran%11;
//声明11个随机数，0-10；
var C_ran = _ran%5;
//声明5个随机数，0-4;
creat_p.style.top = 30*T_ran + "px";
//新创建的p标签给上一个top值，0-300px;
creat_p.style.color = colors[C_ran];
//新创建的p标签给上一个颜色,colors数组里面随机一个。
creat_p.style.fontSize = F_ran + "px";
//新创建的p标签给上一个字体大小15-19px;
}
var speeds = {};
//声明一个空数组.
function Speed(){
//创建随机速度的函数
for (var i=0;i<_p.length;i++) {
var name = _p[i].className;
//获取各个p标签的class值.
speed = speeds[name];
//将name传入speeds对象，并赋值给speed.
if(speed == null){
//如果speed等于null执行以下代码
var S_ran = Math.floor(Math.random()*5)+1;
//声明个随机数,1-5.
speeds[name] = S_ran;
//并将随机数赋值给speeds对象(json)的属性
}
var l = _p[i].style.left;
//获取p标签的left值.
if(l == 0){
l = "0px";
//如果l等于0，就给0加上px.
}
var s = parseInt(l) +speed;
//解析l转化为数字，再加上一个随机数，以保证弹幕发送字体移动速度不同.
_p[i].style.left = s + "px";
//给各个p标签加上随机数
if(main.offsetWidth < _p[i].offsetLeft){
//如果p标签移动的位置大于mian的宽度
main.removeChild(_p[i]);
//删除这个p标签
clearInterval();
//清除定时器
}
}
}
window.onload = function(){
setInterval(Speed,50);
//每50毫秒执行一下Speed函数
}
这次主要讲解了每行代码的作用，并没详细分析代码作用和思路，有疑问的朋友可以私信我，共同学习!