基于原生js实现主流弹幕的所有功能

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Tomsidi/article/details/89487758

原生js实现弹幕效果原理 二

距离写实现原理一有很长一段时间了,因为好像没什么人看,所以我就不太想写原理二,为了不食言,我还是坚持做完这个系列吧

下面介绍的就是目前主流直播弹幕网站的弹幕实现方式,包括弹幕指定暂停,点赞,举报功能.

首先来看一张实现动图

barrage-2

原理简介

  • 动画效果使用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框架的注解方法跟踪小框架

展开阅读全文

没有更多推荐了,返回首页