啦啦啦啦啦啦啦
啦啦啦啦啦啦啦
資訊專欄INFORMATION COLUMN
摘要：現在許多直播軟件和視頻都有彈幕功能，讓我們來看看并分析是怎么實現的。
現在許多直播軟件和視頻都有彈幕功能，讓我們來看看并分析是怎么實現的。
這邊我主要分析下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函數
}
這次主要講解了每行代碼的作用，并沒詳細分析代碼作用和思路，有疑問的朋友可以私信我，共同學習!
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111742.html
摘要：官方地址支持協議用于實時通信和跨平臺的框架。如實時分析系統二進制流數據處理應用在線聊天室在線客服系統評論系統等。官方地址動畫效果是一款優雅的網頁彈幕插件支持顯示圖片文字以及超鏈接。 廢話不多說，首先上效果圖。 效果圖 showImg(https://segmentfault.com/img/bVGo0P?w=521&h=635); 用途 搞活動、年會的時候，在大屏幕上實時顯示留言、吐...
摘要：站的彈幕服務器也有類似的機制，隨便打開一個未開播的直播間，抓包將看到每隔左右會給服務端發送一個心跳包，協議頭第四部分的值從修改為即可。 原文：B 站直播間數據爬蟲， 歡迎轉載項目地址：bilibili-live-crawler 前言 起因 去年在 B 站發現一個后期超強的 UP 主：修仙不倒大小眼，專出 PDD 這樣知名主播的吃雞精彩集錦，漲粉超快。于是想怎么做這樣的 UP，遇到的第一...
閱讀 2885·2021-10-26 09:49
閱讀 3221·2021-10-14 09:42
閱讀 2042·2021-09-13 10:31
閱讀 2580·2019-08-30 11:13
閱讀 2962·2019-08-29 16:31
閱讀 1068·2019-08-29 13:58
閱讀 1859·2019-08-29 12:12
閱讀 3554·2019-08-26 13:48
