基於原生js實現主流彈幕的所有功能

原生js實現彈幕效果原理二

距離寫實現原理一有很長一段時間了，因爲好像沒什麼人看，所以我就不太想寫原理二，爲了不食言，我還是堅持做完這個系列吧

下面介紹的就是目前主流直播彈幕網站的彈幕實現方式，包括彈幕指定暫停，點贊，舉報功能.

首先來看一張實現動圖

原理簡介

動畫效果使用css3中的 transition 屬性實現
只有transition是遠遠不夠的，因爲transition需要主動觸發，但是一般網上常見的簡單的觸發方式，就是 定義css樣式的:hover或者:focus屬性，指定用戶的某一個活動主動觸發transition,這顯然是無法實現彈幕自動化效果的。因此，可以想到使用js觸發。css觸發說到底也就是當滿足某種條件時，替換dom元素的class樣式。
知道原理以後我們要做的就是，在適當的時機給彈幕dom添加上class或者移除class，在js裏這是非常簡單的，dom.classList.add(“xxx”)實現添加class，dom.classList.remove(“xxx”)移除class.
上面強調的適當這個詞大有文章，~~衆所周知~~，js是一個單線程編程語言，可能有些人被setInterval和setTimeOut函數誤導，以爲是js引擎新開了一個線程去處理定時功能，但實際上，js引擎所做僅僅只是，1.將計時任務放到一個帶有優先級的事件隊列中 2.然後一個一個的執行事件
上面說了js引擎是單線程按隊列順序執行事件，但每個事件之間不可避免的會有間隔時間，在這個間隔時間裏js引擎是空閒的，當js引擎空閒時，就是GUI繪製引擎工作的時間了，GUI引擎做的工作就是渲染dom。即是說，並不是說js剛改變class，dom元素的樣式就會刷新，中間有一個間隔時間，這個間隔時間就是GUI引擎在等待js引擎空閒,具體的細節你們可以去https://blog.csdn.net/qq_36995542/article/details/80007381看看。~~當初我把我對js單線程的理解發到一個前端羣的時候，有個25仔說這已經達到了月薪2萬的前端水準，老子信了他的鬼。。。。~~。

源代碼解析

首先是html

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>

<meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>-------------</title>
<link type="text/css" href="script/jquery-easyui-1.7.5/themes/icon.css" rel="stylesheet">
<link type="text/css" href="script/jquery-easyui-1.7.5/themes/default/easyui.css" rel="stylesheet">
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery-easyui-1.7.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="script/jquery-easyui-1.7.5/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
  rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css?t=1.1.24">
</head>
<body>
<nav class="side-menu">
<div class="settings">
<img class="head-icon" src="pic/head-icon-1.jpg" />
</div>
<div class="menu-ul">
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">Home</span>
</a>
</li>

<li>
<a href="panSearch.html">
<i class="fa fa-cloud fa-lg"></i>
<span class="nav-text">網盤資源搜索</span>
</a>
</li>

<li>
<a href="#">
<i class="fa fa-book fa-lg"></i>
<span class="nav-text">Book</span>
</a>
</li>

<li>
<a href="#">
<i class="fa fa-envelope fa-lg"></i>
<span class="nav-text">Envelope</span>
</a>
</li>

<li>
<a href="#">
<i class="fa fa-rocket fa-lg"></i>
<span class="nav-text">Rocket</span>
</a>
</li>

<li>
<a href="#">
<i class="fa fa-code fa-lg"></i>
<span class="nav-text">Code</span>
</a>
</li>

<li>
<a href="#">
<i class="fa fa-coffee fa-lg"></i>
<span class="nav-text">Coffee</span>
</a>
</li>

<li>
<a href="#">
<i class="fa fa-compass fa-lg"></i>
<span class="nav-text">Compass</span>
</a>
</li>

<li>
<a href="#">
<i class="fa fa-download fa-lg"></i>
<span class="nav-text">Download</span>
</a>
</li>
</ul>
</div>
</nav>
<div class="barrage-box">
<div class="barrage-content">
<!--<canvas id="canvas-1"></canvas>-->
<div class="barrage-road">
<span class="barrage">
測試彈幕.....
<!--<input class="starButton" type="button" value="">-->
<img src="pic/star-active.png" class="star-img" alt="">
<span class="star-num-text">0</span>
</span>
</div>
<div class="barrage-road">

</div>
<div class="barrage-road">

</div>
<div class="barrage-road">

</div>
<div class="barrage-road">

</div>
<div class="barrage-road">

</div>
<div class="barrage-road">

</div>
</div>

<div class="barrage-settings">
<!--<input class="text-size" type="range" max="100" min="0">-->
<input class="text-preview" type="button" value="Hello World">
<div class="range-slider">
<div class="range-slider-fill"></div>
<div class="range-slider-handle"></div>
</div>
<div style="margin-left: 5px">
<input type="radio"  name="colorSelected" value="black">
<span style="color: black">黑色</span>
</div>
<div style="margin-left: 5px">
<input type="radio"  name="colorSelected" value="red">
<span style="color: red">紅色</span>
</div>
<div style="margin-left: 5px">
<input type="radio"  name="colorSelected" value="green">
<span style="color: green">綠色</span>
</div>
<div style="margin-left: 5px">
<input type="radio"  name="colorSelected" value="white" checked="checked">
<span style="color: white">白色</span>
</div>
<div style="margin-left: 10px">
<select class="speed-selector">
<option value="12" name="speedNum">請選擇車速</option>
<option value="12" name="speedNum">8</option>
<option value="11" name="speedNum">7</option>
<option value="10" name="speedNum">6</option>
<option value="9" name="speedNum">5</option>
<option value="8" name="speedNum">4</option>
<option value="7" name="speedNum">3</option>
<option value="6" name="speedNum">2</option>
<option value="5" name="speedNum">1</option>
</select>
</div>

</div>

<div class="comment-box">
<input class="comment-input" type="text" placeholder="請輸入待發送內容">
</div>
<div class="button-area">
<button class="send-button" onclick="addBarrageData()">發送彈幕</button>
</div>

</div>
<script type="text/javascript" src="script/index-2-pro.js?t=1.0.23"></script>
<ul class="right-menu-ul" style="display: none">
<li class="menu-item">舉報當前彈幕</li>
</ul>
</body>
</html>

我實在是不知道怎麼讓html代碼在不被解析的情況下保持縮進…

html代碼沒什麼好說的，連這個都看不懂的話，下面的基本也沒戲了。

重頭戲js源碼

js這門語言的特點就是: 它的語義寬鬆，這也就導致了很多的js代碼寫出來顯得雜亂無章，比如我這個。但是用熟練了以後，你就會發現它越用越上癮。

“use strict”;

var barrageContent = document.getElementsByClassName("barrage-content")[0];
// var rect = barrageContent.getBoundingClientRect();

/**
 * 彈道
 * @type {HTMLCollectionOf<Element>}
 */
var barrageRoad = document.getElementsByClassName("barrage-road");


var rangeValue = 20;//字體大小 預設值

var sliderHandle = document.getElementsByClassName("range-slider-handle")[0];//字體調節滑塊
var slider = document.getElementsByClassName("range-slider")[0];
var sliderRect = slider.getBoundingClientRect();
var sliderFill = document.getElementsByClassName("range-slider-fill")[0];//滑過區域
var textPreview = document.getElementsByClassName("text-preview")[0];//預覽字體區

var content = document.getElementsByClassName("comment-input")[0];//彈幕輸入框
var speedNum = document.getElementsByClassName("speed-selector")[0];//彈幕速度
var color = document.getElementsByName("colorSelected");//彈幕顏色選擇器
var colorSelected = "white";//被選擇顏色 預設值

var transitionEvent = whichTransitionEvent();//判斷瀏覽器內核類型

var index = 1;//數據庫彈幕表分頁頁碼

var deviceType = goPAGE();

var I = 0;//右鍵彈幕的id
sliderHandle.style.left = "0px";




/**
 * 測試用數據 數據格式，我下面的源碼獲取數據是用的我自己建的後臺，如果你只是想要一個單機版的話，直接添加下面數組裏的初始化數據就行，每個字段都要。
 * @type {*[]}
 */
var barrageData_2 = [
	{
		"barrageId": 1,
		"content": "第二條彈幕.............",
		"color": "red",
		"speed": 16,
		"textSize": 20,
		"road": 0,
		"starNum":0
	}
];


barrageData_2 = barrageData_2.concat();


/**
* 初始化操作自執行函數
*/
(function () {
for (var i = 0; i < barrageData_2.length; i++) {
    barrageData_2[i]["road"] = i % barrageRoad.length;
}
console.log("screen-size", screen.width, screen.height);
var that = this;
var timer = setInterval(function (args) {
    if (barrageData_2.length <= 0) {
        console.log("barrageData:", barrageData_2);
        regularGetBarrage();
        return;
    }
    sendBarrage(barrageData_2[0]["barrageId"], barrageData_2[0]["content"], barrageData_2[0]["color"], barrageData_2[0]["speed"], barrageData_2[0]["textSize"], barrageData_2[0]["road"]);
    barrageData_2.splice(0, 1);
}, 1000);


})();


window.onload = function (ev) {
	document.getElementsByClassName("menu-item")[0].onclick = report;//TODO
}

/**
* 鼠標指定彈幕事件函數
* @param event
*/
function onMouseIn(event) {
	var barrage = event.valueOf();
	var computeStyle = window.getComputedStyle(barrage), left = computeStyle.getPropertyValue("left");
	barrage.style.left = left;
	barrage.classList.remove("barrage-active");
}

/**
* 鼠標離開彈幕事件函數
* @param event
*/
function onMouseLeave(event) {
	var barrage = event.valueOf();
	barrage.classList.add("barrage-active");
}

/**
* 彈幕點擊事件
* @param event
*/
function mouseClicked(event) {
	var barrage = event.valueOf();
	barrage.classList.add("barrage-clicked");
	barrage.childNodes[1].setAttribute("src", "/pic/star-active.png");
	barrage.childNodes[3].innerHTML = parseInt(barrage.childNodes[3].innerHTML) + 1;

	star(barrage);
}


/**
 * 彈幕發送處理函數
 * @param index
 * @param content 彈幕內容
 * @param colorSelected 選擇的顏色
 * @param speedNum 彈幕速度
 * @param rangeValue 字體大小
 * @param roadNum 彈道
 */
function sendBarrage(barrageId, content, colorSelected, speedNum, rangeValue, roadNum) {

	var newBarrage = document.createElement("span");

	if (content === "") {
    	return;
}

	newBarrage.classList.add("barrage");
	newBarrage.style.setProperty("color", colorSelected);
	newBarrage.style.transitionDuration = speedNum + "s";
	newBarrage.style.webkitTransitionDuration = speedNum + "s";
	newBarrage.style.setProperty("font-size", rangeValue + "px");
	newBarrage.innerHTML = content + "<img src='pic/star.png' class='star-img' alt=''>" +
    "                    <span class='star-num-text'>"+barrageData_2[0]["starNum"]+"</span><input type='text' hidden value="+barrageId+">";
	newBarrage.onmouseenter = function (ev) {
    	onMouseIn(this);
	};
	newBarrage.onmouseleave = function (ev) {
    	onMouseLeave(this);
	};
	if (deviceType === "pc"){
    	newBarrage.onclick = function (ev) {
        	var ul = document.getElementsByClassName("right-menu-ul")[0];

        	ul.style.display = "none";
        	mouseClicked(this);
    	};
	} else {
    	newBarrage.ontouchend = function (ev) {
        	var ul = document.getElementsByClassName("right-menu-ul")[0];

        	ul.style.display = "none";
        	mouseClicked(this);
    	}
	}

	newBarrage.oncontextmenu = function (ev) {
    	var ul = document.getElementsByClassName("right-menu-ul")[0];
    	// console.log("contextmenu", ev.currentTarget.valueOf().childNodes);
    	event.preventDefault();
    	//TODO 奇蹟的用法
    	I = barrageId;
    	ul.style.display = "block";
    	ul.style.left = event.clientX + 10 + "px";
    	ul.style.top = event.clientY + 10 + "px";
	};

	//TODO 備註，dom初始化的時機
	barrageRoad[roadNum].appendChild(newBarrage);

	setTimeout(function () {
    	newBarrage.classList.add("barrage-active");
	},50);


	newBarrage.addEventListener(transitionEvent, function (evt) {
    	// console.log(this);
    	this.parentNode.removeChild(this);
    	// barrageData_2.splice(0, 1);
    	console.log("----------------------transitionEnd事件觸發一次---------------");
	});
}

/**
* 滑塊鼠標按下事件函數
* @param event
*/
if (deviceType === "pc"){
sliderHandle.onmousedown = function (event) {
    var that = this;
    var oldX = event.clientX;
    var left = parseInt(that.style.left);

    document.onmousemove = function (ev) {
        var x = ev.clientX - oldX;

        that.style.left = left + x + "px";

        rangeValue = Math.ceil((parseInt(that.style.left) / sliderRect.width) * 40) + 1;


        if (parseInt(that.style.left) < 0) {
            that.style.left = "0";
            rangeValue = 10;
        }
        if (parseInt(that.style.left) > sliderRect.width) {
            that.style.left = sliderRect.width - 10 + "px";
            rangeValue = 50;
        }
        sliderFill.style.width = that.style.left;
        textPreview.style.fontSize = rangeValue + "px";
        console.log("rangeValue: ", rangeValue);
    };


    document.onmouseup = function (ev) {
        document.onmouseup = null;
        document.onmousemove = null;
    }
};
} else {
sliderHandle.ontouchstart = function (event) {
    var that = this;
    var oldX = event.clientX;
    var left = parseInt(that.style.left);

    document.ontouchmove = function (ev) {
        var x = ev.clientX - oldX;

        that.style.left = left + x + "px";

        console.log("left", that.style.left);

        rangeValue = Math.ceil((parseInt(that.style.left) / sliderRect.width) * 40) + 1;


        if (parseInt(that.style.left) < 0) {
            that.style.left = "0";
            rangeValue = 10;
        }
        if (parseInt(that.style.left) > sliderRect.width) {
            that.style.left = sliderRect.width - 10 + "px";
            rangeValue = 50;
        }
        sliderFill.style.width = that.style.left;
        textPreview.style.fontSize = rangeValue + "px";
        console.log("rangeValue: ", rangeValue);
    };


    document.ontouchend = function (ev) {
        document.ontouchend = null;
        document.ontouchmove = null;
    }
};

}


/**
* 發送彈幕按鈕點擊事件響應函數
*/
function addBarrageData() {
var item = {
    "content": "",
    "color": "red",
    "speed": 16,
    "textSize": 20,
    "road": 0,
    "starNum": 0
};
var content_1 = content.value;
item["speed"] = speedNum.value;
item["textSize"] = rangeValue;
item["road"] = Math.floor(Math.random() * barrageRoad.length);


content_1 = contentFilter();
item["content"] = content_1;
console.log("content: ", content_1);

for (var i = 0;i<color.length;i++) {
    if (color[i].checked) {
        item["color"] = color[i].value;
        break;
    }
}
console.log("添加事件觸發");
barrageData_2.push(item);
console.log("barrageData :", barrageData_2.length);
// content.value = "";
saveBarrage();
}

/**
* 右鍵菜單處理函數
*/

// document.oncontextmenu = function (event) {
//
//     var ul = document.getElementsByClassName("right-menu-ul")[0];
//
//     event.preventDefault();
//
//     ul.style.display = "block";
//     ul.style.left = event.clientX +"px";
//     ul.style.top = event.clientY + "px";
//
//     // return false;
// }
/**
* 全局點擊事件重寫
* @param e
*/
document.onclick = function (e) {
	var ul = document.getElementsByClassName("right-menu-ul")[0];

	ul.style.display = "none";
};

/**
 * 舉報彈幕響應函數
 * @param id
 */
function report() {

// $.ajax({
//     url: "/barrage/save",
//     type: "post",
//     dataType: "json",
//     data: {
//         "barrageSenderId": 1,
//         "content": contentFilter(),
//         "speed": speedNum.value,
//         "color": function () {
//             for (var i = 0; i < color.length; i++) {
//                 if (color[i].checked) {
//                     return color[i].value;
//                 }
//             }
//         },
//         "textSize": rangeValue,
//         "road": Math.floor(Math.random() * barrageRoad.length)
//     },
//     complete: function (ev) {
//
//     }
// });

$.messager.show({
    title: "提示消息",
    msg: "舉報成功:"+ I,
    timeout: 5000
});
}

/**
* 發送的彈幕發送至服務器
*/
function saveBarrage() {
$.ajax({
    url: "/barrage/save",
    type: "post",
    dataType: "json",
    data: {
        "barrageSenderId": 1,
        "content": contentFilter(),
        "speed":speedNum.value,
        "color":function () {
            for (var i = 0;i<color.length;i++){
                if (color[i].checked){
                    return color[i].value;
                }
            }
        },
        "textSize": rangeValue,
        "road": Math.floor(Math.random() * barrageRoad.length)
    },
    complete:function (ev) {
        // console.log(ev);
        content.value = "";
        if (ev.status === 200){
            console.log(ev.responseText);
        }else{
            console.log("error", ev.responseText);
        }
    }
});
}

/**
* 後臺彈幕數據拉取函數
*/

function regularGetBarrage() {
$.ajax({
    url: "/barrage/getData?index=" + index,
    type: "get",
    dataType: "json",
    complete: function (ev) {
        if (ev.status == 200) {
            // console.log("regular", ev.responseText);
            var data = JSON.parse(ev.responseText);
            barrageData_2 = barrageData_2.concat(data["resultData"]["barrageInfoPage"]["content"]);
            console.log("regular", barrageData_2);
            index++;
            // console.log(data["resultData"]["barrageInfoPage"]["content"]);
        } else {
            console.log("error", ev.responseText);
        }
    }
});
}

/**
* 彈幕點贊處理函數
* @param option
*/
function star(option) {
var barrageId = option.childNodes[4].value;
// console.log("star", option.childNodes);
$.ajax({
    type: "get",
    dataType: "json",
    url: "/barrage/star?barrageId=" + barrageId,
    complete: function (ev) {
        if (ev.status == 200) {
            $.messager.show({
                title: "系統提示",
                msg: "點贊成功",
                timeout: 3000
            });
            console.log(ev.responseText);
        }
    }
});
}

/**
* 瀏覽器內核判斷函數
* @returns {*}
*/
function whichTransitionEvent() {
var t;
var el = document.createElement('fakeelement');
var transitions = {
    'transition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'MozTransition': 'transitionend',
    'WebkitTransition': 'webkitTransitionEnd'
}

for (t in transitions) {
    if (el.style[t] !== undefined) {
        return transitions[t];
    }
}
}

/**
* 輸入內容過濾
*/
function contentFilter() {
var content_1 = content.value;
content_1 = content_1.replace(/<.*?>.*?<\/.*?>/g, '[非法字段]');
content_1 = content_1.replace(/<img/g, '[非法字段]');
content_1 = content_1.replace(/<script/g, '[非法字段]');

return content_1;
}

/**
*判斷是否爲移動端
*/
function goPAGE() {
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    /*window.location.href="你的手機版地址";*/
    // deviceType = "mobile";
    return "mobile";
}
else {
    /*window.location.href="你的電腦版地址";    */
    // deviceType = "pc";
    return "pc";
}
}

css代碼

這個我就放github上算了，不然篇幅實在是太長了。
https://github.com/TomShiDi/barrage-website

下一篇文章預告

實現一個基於springboot框架的註解方法跟蹤小框架

基於原生js實現主流彈幕的所有功能

原生js實現彈幕效果原理二

原理簡介

源代碼解析

首先是html

重頭戲js源碼

css代碼

下一篇文章預告

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

大齡程序員思考

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

nuget添加readme

springBoot+JpaRepository配置數據庫踩坑

基於SpringBoot的代碼跟蹤框架demo

java中整型數據轉換深入解析

nginx 反向代理 http轉https wss轉ws 服務端不變

從Springboot源碼分析啓動過程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

基於原生js實現主流彈幕的所有功能

原生js實現彈幕效果原理 二

原理簡介

源代碼解析

首先是html

重頭戲js源碼

css代碼

下一篇文章預告

原生js實現彈幕效果原理二