啦啦啦啦啦啦啦
啦啦啦啦啦啦啦
資訊專(zhuān)欄INFORMATION COLUMN
摘要：現(xiàn)在許多直播軟件和視頻都有彈幕功能，讓我們來(lái)看看并分析是怎么實(shí)現(xiàn)的。
現(xiàn)在許多直播軟件和視頻都有彈幕功能，讓我們來(lái)看看并分析是怎么實(shí)現(xiàn)的。
這邊我主要分析下js的代碼，想看源碼的朋友送上鏈接，http://sandbox.xinfan.org/xdd...
HTML代碼如下（css代碼就不展示了，想看的直接看源碼吧）：
啦啦啦啦啦啦啦
啦啦啦啦啦啦啦
JS代碼如下：
var num = 2;
//聲明了num=2
var _p = document.getElementsByTagName("p");
//獲取標(biāo)簽p.
var main = document.getElementById("main");
//獲取Id為mian的標(biāo)簽
function Leave(){
var colors = ["red","orange","yellow","pink","green"];
//儲(chǔ)存5個(gè)顏色
var ipt = document.getElementById("ipt");
//獲取id為ipt的標(biāo)簽
var launch = document.getElementById("launch");
//獲取id為launch的標(biāo)簽
var creat_p = document.createElement("p");
//創(chuàng)建一個(gè)p標(biāo)簽
main.appendChild(creat_p).innerText = ipt.value;
//往main子集放一個(gè)p標(biāo)簽并且p標(biāo)簽的文本為ipt的值
ipt.value = "";
//初始化ipt
creat_p.className = "p" + num;
//創(chuàng)建的p標(biāo)簽設(shè)置class為p2,p3,p4以此類(lèi)推
num++;
//執(zhí)行一次加上1.
var _ran = Math.floor(Math.random()*1000);
//聲明個(gè)0-999的隨機(jī)數(shù).
var F_ran = Math.floor(Math.random()*5)+15;
//聲明個(gè)15-19隨機(jī)數(shù)
var T_ran = _ran%11;
//聲明11個(gè)隨機(jī)數(shù)，0-10；
var C_ran = _ran%5;
//聲明5個(gè)隨機(jī)數(shù)，0-4;
creat_p.style.top = 30*T_ran + "px";
//新創(chuàng)建的p標(biāo)簽給上一個(gè)top值，0-300px;
creat_p.style.color = colors[C_ran];
//新創(chuàng)建的p標(biāo)簽給上一個(gè)顏色,colors數(shù)組里面隨機(jī)一個(gè)。
creat_p.style.fontSize = F_ran + "px";
//新創(chuàng)建的p標(biāo)簽給上一個(gè)字體大小15-19px;
}
var speeds = {};
//聲明一個(gè)空數(shù)組.
function Speed(){
//創(chuàng)建隨機(jī)速度的函數(shù)
for (var i=0;i<_p.length;i++) {
var name = _p[i].className;
//獲取各個(gè)p標(biāo)簽的class值.
speed = speeds[name];
//將name傳入speeds對(duì)象，并賦值給speed.
if(speed == null){
//如果speed等于null執(zhí)行以下代碼
var S_ran = Math.floor(Math.random()*5)+1;
//聲明個(gè)隨機(jī)數(shù),1-5.
speeds[name] = S_ran;
//并將隨機(jī)數(shù)賦值給speeds對(duì)象(json)的屬性
}
var l = _p[i].style.left;
//獲取p標(biāo)簽的left值.
if(l == 0){
l = "0px";
//如果l等于0，就給0加上px.
}
var s = parseInt(l) +speed;
//解析l轉(zhuǎn)化為數(shù)字，再加上一個(gè)隨機(jī)數(shù)，以保證彈幕發(fā)送字體移動(dòng)速度不同.
_p[i].style.left = s + "px";
//給各個(gè)p標(biāo)簽加上隨機(jī)數(shù)
if(main.offsetWidth < _p[i].offsetLeft){
//如果p標(biāo)簽移動(dòng)的位置大于mian的寬度
main.removeChild(_p[i]);
//刪除這個(gè)p標(biāo)簽
clearInterval();
//清除定時(shí)器
}
}
}
window.onload = function(){
setInterval(Speed,50);
//每50毫秒執(zhí)行一下Speed函數(shù)
}
這次主要講解了每行代碼的作用，并沒(méi)詳細(xì)分析代碼作用和思路，有疑問(wèn)的朋友可以私信我，共同學(xué)習(xí)!
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82031.html
摘要：官方地址支持協(xié)議用于實(shí)時(shí)通信和跨平臺(tái)的框架。如實(shí)時(shí)分析系統(tǒng)二進(jìn)制流數(shù)據(jù)處理應(yīng)用在線聊天室在線客服系統(tǒng)評(píng)論系統(tǒng)等。官方地址動(dòng)畫(huà)效果是一款優(yōu)雅的網(wǎng)頁(yè)彈幕插件支持顯示圖片文字以及超鏈接。 廢話不多說(shuō)，首先上效果圖。 效果圖 showImg(https://segmentfault.com/img/bVGo0P?w=521&h=635); 用途 搞活動(dòng)、年會(huì)的時(shí)候，在大屏幕上實(shí)時(shí)顯示留言、吐...
摘要：站的彈幕服務(wù)器也有類(lèi)似的機(jī)制，隨便打開(kāi)一個(gè)未開(kāi)播的直播間，抓包將看到每隔左右會(huì)給服務(wù)端發(fā)送一個(gè)心跳包，協(xié)議頭第四部分的值從修改為即可。 原文：B 站直播間數(shù)據(jù)爬蟲(chóng)， 歡迎轉(zhuǎn)載項(xiàng)目地址：bilibili-live-crawler 前言 起因 去年在 B 站發(fā)現(xiàn)一個(gè)后期超強(qiáng)的 UP 主：修仙不倒大小眼，專(zhuān)出 PDD 這樣知名主播的吃雞精彩集錦，漲粉超快。于是想怎么做這樣的 UP，遇到的第一...
閱讀 2646·2021-10-08 10:04
閱讀 2744·2021-09-06 15:02
閱讀 831·2019-08-30 13:50
閱讀 1560·2019-08-30 13:21
閱讀 2595·2019-08-30 11:15
閱讀 2123·2019-08-29 17:19
閱讀 1590·2019-08-26 13:55
閱讀 1267·2019-08-26 10:15
