JS弹幕代码分析

blankyao 发布于2019-08-01 16:31 / 2434人阅读

摘要：现在许多直播软件和视频都有弹幕功能，让我们来看看并分析是怎么实现的。

现在许多直播软件和视频都有弹幕功能，让我们来看看并分析是怎么实现的。

这边我主要分析下js的代码，想看源码的朋友送上链接，http://sandbox.xinfan.org/xdd...

HTML代码如下（css代码就不展示了，想看的直接看源码吧）：


        啦啦啦啦啦啦啦
        啦啦啦啦啦啦啦

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函数    
}

这次主要讲解了每行代码的作用，并没详细分析代码作用和思路，有疑问的朋友可以私信我，共同学习!

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50579.html

JS弹幕代码分析

摘要：现在许多直播软件和视频都有弹幕功能，让我们来看看并分析是怎么实现的。现在许多直播软件和视频都有弹幕功能，让我们来看看并分析是怎么实现的。这边我主要分析下js的代码，想看源码的朋友送上链接，http://sandbox.xinfan.org/xdd... HTML代码如下（css代码就不展示了，想看的直接看源码吧）：啦啦啦啦啦啦啦啦啦啦啦啦啦啦 ...

bingchen 2019-08-29 12:12 评论0 收藏0
JS弹幕代码分析

摘要：现在许多直播软件和视频都有弹幕功能，让我们来看看并分析是怎么实现的。现在许多直播软件和视频都有弹幕功能，让我们来看看并分析是怎么实现的。这边我主要分析下js的代码，想看源码的朋友送上链接，http://sandbox.xinfan.org/xdd... HTML代码如下（css代码就不展示了，想看的直接看源码吧）：啦啦啦啦啦啦啦啦啦啦啦啦啦啦 ...

luoyibu 2019-08-20 15:08 评论0 收藏0
Web实时弹幕原理分析

摘要：官方地址支持协议用于实时通信和跨平台的框架。如实时分析系统二进制流数据处理应用在线聊天室在线客服系统评论系统等。官方地址动画效果是一款优雅的网页弹幕插件支持显示图片文字以及超链接。废话不多说，首先上效果图。效果图 showImg(https://segmentfault.com/img/bVGo0P?w=521&h=635); 用途搞活动、年会的时候，在大屏幕上实时显示留言、吐...

tigerZH 2019-06-27 14:56 评论0 收藏0
B 站直播间数据爬虫

摘要：站的弹幕服务器也有类似的机制，随便打开一个未开播的直播间，抓包将看到每隔左右会给服务端发送一个心跳包，协议头第四部分的值从修改为即可。原文：B 站直播间数据爬虫，欢迎转载项目地址：bilibili-live-crawler 前言起因去年在 B 站发现一个后期超强的 UP 主：修仙不倒大小眼，专出 PDD 这样知名主播的吃鸡精彩集锦，涨粉超快。于是想怎么做这样的 UP，遇到的第一...

xuweijian 2019-06-28 18:40 评论0 收藏0