原生JS实现弹幕效果的简单操作指南

作者：表演者7号时间：2024-04-22 22:31:20　

前言

现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果，那么如何用JS实现这样的效果呢，用一个初学者的方法记录下这个方法，欢迎大牛指导。

1、首先需要操作文档必须拿到Dom中的元素，当然有很多方法，这里还是用document.querySelector.

2、这边也是为了键盘和鼠标都可发送封装了一个函数function sendMsg(){

首先需要创建一个容器来接受你编辑的内容，这里用span标签，当然其他标签也可

var oSpan=document.cerateElement(“span”)

将oSpan插入到需要展示的oVideoBox

oVideoBox.appendChild(oSpan)

给oSpan加入class用于编辑插入的样式，当然也可以用js,这里用的CSS样式oSpan.classList.add(“danmu”)

用innerHTML接用户图像及弹幕内容这里用ES6的一个``

oSpan.innerHTML =` < img src ="./source/lei.jpg" /> ${oContent.value}

计算弹幕出现的初始位置，left位移初始位置即oVideoBox的宽度oVideoBox.offsetWidth.也是oSpan的初始定位oSpan.offsetLeft
top位移的初始即oVideoBox内随机的高度，避免超出

var maxTop=oVideoBox…clientHeight-oSpan.offsetHeight;
var top=Math.round(Math.random()*maxTop)
oSpan.style.top = top+ ‘px'

当然JS的动画也离不开计时器。这边也是用setInterval()

var timer=setInterval(()=>{
var left=oSpan.offsetLeft
left-=10
oSpan.style.left= left+ ‘px'

这边判断一下如果超出屏幕就把弹幕和计时器移出

if(left<-oSpan.offsetWidtb){
clearInterval(timer);
oSpan.remove();}},100)

以上就完成了简易版的弹幕函数就封装完成了，后面就可以引用了，

事件从点击开始，弹幕也是创建点击事件oSend.onclick,

oSend.οnclick=function(){引用函数sendMsg()}

后面可以加上一个键盘的enter可以发送,是一个事件委托window.οnkeydοwn=function(e){

var ev = e || event;
var keyCode = ev.keyCode || ev.which;

判断如果按的是键盘enter的keycode码是13和alt组合

if (keyCode === 13 && ev.altKey) {
sendMsg();}}

以下是bod代码，可以练练

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>作业_弹幕</title>
<style>
* {
padding: 0;
margin: 0;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wrapBox {
width: 800px;
height: 550px;
border: 1px solid #000;
margin: 50px auto 0;
}

.videoBox {
height: 500px;
position: relative;
overflow: hidden;
}

.videoBox img {
width: 100％;
height: 100％;
}

video {
width: 100％;
/* height: 500px; */
}

.danmuSend {
display: flex;
height: 50px;
}

#content {
flex: 1;
}

#send {
width: 100px;
}

.danmu {
color: #f00;
font-size: 20px;
position: absolute;
left: 800px;
top: 0;
white-space: nowrap;
}

.danmu img {
width: 60px;
height: 60px;
border-radius: 50％;
vertical-align: middle;
display: inline-block;
}
</style>
</head>

<body>
<div class="wrapBox">
<div class="videoBox">
<img src="../../source/bg.jpg" />


</div>
<div class="danmuSend">
<input id="content" type="text">
<button id="send">发送</button>
</div>
</div>
</body>

以下是JS的代码：

<script>

var oSend = document.querySelector('#send');
var oContent = document.querySelector('#content');
var oVideoBox = document.querySelector('.videoBox');

function sendMsg() {
var content = oContent.value;

var oSpan = document.createElement('span');
oSpan.className = 'danmu';
oSpan.innerHTML = `<img src="../../source/bg.jpg">${content}`;

oVideoBox.appendChild(oSpan);

var maxTop = oVideoBox.clientHeight - oSpan.offsetHeight;

oSpan.style.top = Math.round(Math.random() * maxTop) + 'px';

var timer = setInterval(() => {
var left = oSpan.offsetLeft;
left -= 10;
oSpan.style.left = left + 'px';
if (left < -oSpan.offsetWidth) {
clearInterval(timer);
oSpan.remove();
}
}, 100);
}

oSend.onclick = function () {
sendMsg();
}

window.onkeydown = function (e) {
var ev = e || event;
var keyCode = ev.keyCode || ev.which;
if (keyCode === 13 && ev.altKey) {
sendMsg();
}
}

</script>

来源：https://blog.csdn.net/biaoyan01/article/details/109570387

标签：js,弹幕,原生

投稿

原生JS实现弹幕效果的简单操作指南

猜你喜欢

5分钟快速掌握Python定时任务框架的实现

Python wxPython库消息对话框MessageDialog用法示例

关于window.opener的用法

python中pandas操作apply返回多列的实现

浅析python递归函数和河内塔问题

mysql mycat 中间件安装与使用

Python实现八皇后问题示例代码

进一步理解Python中的函数编程

用 JavaScript 解数学题

Python简单获取网卡名称及其IP地址的方法【基于psutil模块】

浅谈Python中(&，|)和(and，or)之间的区别

vue如何实现动态加载脚本

MySQL进阶之索引

CSS样式表中继承关系的空格与不空格

python 实现倒计时功能(gui界面)

Golang验证器之validator是使用详解

pandas实现数据读取&清洗&分析的项目实践

使用python实现简单五子棋游戏

sql server删除前1000行数据的方法实例

利用Python库Scapy解析pcap文件的方法