JS弹幕代码分析
时间:2023-04-02 11:54:24
HTML
现在很多直播软件和视频都有弹幕功能,我们来看看分析一下它是如何实现的。这里我主要分析js代码。想看源码的朋友发个链接。https://powhd.github.io/barrage/HTML代码如下(css代码不会显示,想看的直接看源码):Lalalalalalala
Lalalalalalap> launch清屏 JS代码如下:var数=2;//声明num=2var_p=document.getElementsByTagName("p");//获取标签p。varmain=document.getElementById("main");//获取Id为mian的tagfunctionLeave(){varcolors=["red","orange","yellow","pink","green"];//存储5种颜色vaript=document.getElementById("ipt");//获取id为ipt的tagvarlaunch=document.getElementById("launch");//获取id为launch的标签varcreat_p=document.createElement("p");//创建p标签main.appendChild(creat_p).innerText=ipt.value;//在主子集中放一个p标签,p标签的文本就是ipt的值ipt.value="";//初始化iptcreat_p.className="p"+num;//设置创建的p标签的类为p2,p3,p4等num++;//执行一次加1var_ran=Math.floor(Math.random()*1000);//声明一个0-999的随机数。varF_ran=Math.floor(Math.random()*5)+15;//声明一个15-19的随机数varT_ran=_ran%11;//声明11个随机数,0-10;varC_ran=_ran%5;//声明5个随机数,0-4;creat_p.style.top=30*T_ran+"px";//新创建的p标签给之前的top值,0-300px;creat_p.style.color=颜色[C_ran];//新创建的p标签给出之前的颜色,colors数组中的随机一个creat_p.style.fontSize=F_ran+"px";//新创建的p标签给之前的字体大小15-19px;}var速度={};//声明一个空数组。functionSpeed(){//为(vari=0;i<_p.length;i++)创建随机速度函数{varname=_p[i].className;//获取每个p标签的类值。速度=速度[名称];//设置名称传递给速度对象并分配给速度。if(speed==null){//如果speed等于null,执行下面的代码varS_ran=Math.floor(Math.random()*5)+1;//声明一个随机数,1-5。速度[名称]=S_ran;//并将随机数分配给速度对象(json)的属性}varl=_p[i].style.left;//获取p标签的左值.if(l==0){l="0px";//如果l等于0,px加0。}vars=parseInt(l)+speed;//将l解析成数字,加上最后一个随机数,保证弹幕发送字体移动速度不同。_p[i].style.left=s+"px";//给每个p标签添加一个随机数if(main.offsetWidth<_p[i].offsetLeft){//如果p标签的移动位置大于main.removeChild(_p[i])的宽度;//删除这个p标签clearInterval();//清除定时器}}}window.onload=function(){setInterval(Speed,50);//每50毫秒执行一次Speed函数}这次主要讲解每一行代码的作用,并没有详细分析代码的作用和思路。有什么问题可以私信我,一起学习!