国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

<cite id="ewuyy"></cite>

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

立即前往

首頁/文章專欄/JS彈幕代碼分析

JS彈幕代碼分析

bingchen 發(fā)布于2019-08-29 12:12 / 1865人閱讀

摘要：現(xiàn)在許多直播軟件和視頻都有彈幕功能，讓我們來看看并分析是怎么實現(xiàn)的。

現(xiàn)在許多直播軟件和視頻都有彈幕功能，讓我們來看看并分析是怎么實現(xiàn)的。

這邊我主要分析下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");
        //創(chuàng)建一個p標簽
        main.appendChild(creat_p).innerText = ipt.value;
        //往main子集放一個p標簽并且p標簽的文本為ipt的值
        ipt.value = "";
        //初始化ipt
        creat_p.className = "p" + num;
        //創(chuàng)建的p標簽設(shè)置class為p2,p3,p4以此類推
        num++;
        //執(zhí)行一次加上1.
        var _ran = Math.floor(Math.random()*1000);
        //聲明個0-999的隨機數(shù).
        var F_ran = Math.floor(Math.random()*5)+15;
        //聲明個15-19隨機數(shù) 
        var T_ran = _ran%11;
        //聲明11個隨機數(shù)，0-10；
        var C_ran = _ran%5;
        //聲明5個隨機數(shù)，0-4;
        creat_p.style.top = 30*T_ran + "px";
        //新創(chuàng)建的p標簽給上一個top值，0-300px;
        creat_p.style.color = colors[C_ran];    
        //新創(chuàng)建的p標簽給上一個顏色,colors數(shù)組里面隨機一個。
        creat_p.style.fontSize = F_ran + "px";
        //新創(chuàng)建的p標簽給上一個字體大小15-19px;
    }
    var speeds = {};
    //聲明一個空數(shù)組.
    function Speed(){
    //創(chuàng)建隨機速度的函數(shù)
        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執(zhí)行以下代碼
                var S_ran = Math.floor(Math.random()*5)+1;
                //聲明個隨機數(shù),1-5.
                speeds[name] = S_ran;        
                //并將隨機數(shù)賦值給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轉(zhuǎn)化為數(shù)字，再加上一個隨機數(shù)，以保證彈幕發(fā)送字體移動速度不同.
            _p[i].style.left = s + "px";
            //給各個p標簽加上隨機數(shù)
            if(main.offsetWidth < _p[i].offsetLeft){
            //如果p標簽移動的位置大于mian的寬度
                main.removeChild(_p[i]);
                //刪除這個p標簽
                clearInterval();
                //清除定時器
            }
            
        }
    }

window.onload = function(){
    setInterval(Speed,50);
    //每50毫秒執(zhí)行一下Speed函數(shù)    
}

這次主要講解了每行代碼的作用，并沒詳細分析代碼作用和思路，有疑問的朋友可以私信我，共同學習!