原生JavaScript实现弹幕组件的示例代码


Posted in Javascript onOctober 12, 2020

前言

如今几乎所有的视频网站都有弹幕功能,那么今天我们就自己用原生 JavaScript 封装一个弹幕类。这个类希望有如下属性和实例方法:

属性

  • el容器节点的选择器,容器节点应为绝对定位,设置好宽高
  • height 每条弹幕的高度
  • mode 弹幕模式,half则为一半容器高度,top为三分之一,full为占满
  • speed弹幕划过屏幕的时间
  • gapWidth后一条弹幕与前一条弹幕的距离

方法

  • pushData 添加弹幕元数据
  • addData持续加入弹幕
  • start开始调度弹幕
  • stop停止弹幕
  • restart 重新开始弹幕
  • clearData清空弹幕
  • close关闭
  • open重新显示弹幕

PS:有一些自封装的工具函数就不贴出来了,大概知道意思就好

初始化

引入JavaScript文件之后,我们希望如下使用,先采取默认配置。

let barrage = new Barrage({
  el: '#container'
})

参数初始化:

function Barrage(options) {
  let {
    el,
    height,
    mode,
    speed,
    gapWidth,
  } = options
  this.container = document.querySelector(el)
  this.height = height || 30
  this.speed = speed || 15000 //2000ms
  this.gapWidth = gapWidth || 20
  this.list = []
  this.mode = mode || 'half'
  this.boxSize = getBoxSize(this.container)
  this.perSpeed = Math.round(this.boxSize.width / this.speed)
  this.rows = initRows(this.boxSize, this.mode, this.height)
  this.timeoutFuncs = []
  this.indexs = []
  this.idMap = []
}

先接受好参数然后初始化,下面看看getBoxSize和initRows

function getBoxSize(box) {
  let {
    height,
    width
  } = window.getComputedStyle(box)
  return {
    height: px2num(height),
    width: px2num(width)
  }

  function px2num(str) {
    return Number(str.substring(0, str.indexOf('p')))
  }
}

通过getComputedStyleapi计算出盒子的宽高,这里用来计算容器的宽高,之后也会用到。

function initRows(box, mode, height) {
  let divisor = getDivisor(mode)
  rows = Math.ceil(box.height * divisor / height)
  return rows
}

function getDivisor(mode) {
  let divisor = .5
  switch (mode) {
    case 'half':
      divisor = .5
      break
    case 'top':
      divisor = 1 / 3
      break;
    case 'full':
      divisor = 1;
      break
    default:
      break;
  }
  return divisor
}

根据高度算出弹幕应该有多少行,下面会有地方用到行数。

插入数据

有两种插入数据的方法,一种是添加源数据,一种是持续添加。先来看添加源数据的方法:

this.pushData = function (data) {

  this.initDom()
  if (getType(data) == '[object Object]') {
    //插入单条
    this.pushOne(data)
  }
  if (getType(data) == '[object Array]') {
    //插入多条
    this.pushArr(data)
  }
}
this.initDom = function () {
  if (!document.querySelector(`${el} .barrage-list`)) {
    //注册dom节点
    for (let i = 0; i < this.rows; i++) {
      let div = document.createElement('div')
      div.classList = `barrage-list barrage-list-${i}`
      div.style.height = `${this.boxSize.height*getDivisor(this.mode)/this.rows}px`
      this.container.appendChild(div)
    }
  }
}

this.pushOne = function (data) {
  for (let i = 0; i < this.rows; i++) {
    if (!this.list[i]) this.list[i] = []

  }

  let leastRow = getLeastRow(this.list) //获取弹幕列表中最少的那一列,弹幕列表是一个二维数组
  this.list[leastRow].push(data)
}
this.pushArr = function (data) {
  let list = sliceRowList(this.rows, data)
  list.forEach((item, index) => {
    if (this.list[index]) {
      this.list[index] = this.list[index].concat(...item)
    } else {
      this.list[index] = item
    }
  })
}
//根据行数把一维的弹幕list切分成rows行的二维数组
function sliceRowList(rows, list) {
  let sliceList = [],
    perNum = Math.round(list.length / rows)
  for (let i = 0; i < rows; i++) {
    let arr = []
    if (i == rows - 1) {
      arr = list.slice(i * perNum)
    } else {
      i == 0 ? arr = list.slice(0, perNum) : arr = list.slice(i * perNum, (i + 1) * perNum)
    }
    sliceList.push(arr)
  }
  return sliceList
}

持续加入数据的方法只是调用了添加源数据的方法,并且开始了调度而已

this.addData = function (data) {
  this.pushData(data)
  this.start()
}

发射弹幕

下面来看看发射弹幕的逻辑

this.start = function () {
  //开始调度list
  this.dispatchList(this.list)
}

this.dispatchList = function (list) {
  for (let i = 0; i < list.length; i++) {
    this.dispatchRow(list[i], i)
  }
}

this.dispatchRow = function (row, i) {
  if (!this.indexs[i] && this.indexs[i] !== 0) {
    this.indexs[i] = 0
  }
  //真正的调度从这里开始,用一个实例变量存储好当前调度的下标。
  if (row[this.indexs[i]]) {
    this.dispatchItem(row[this.indexs[i]], i, this.indexs[i])
  }
}
this.dispatchItem = function (item, i) {
  //调度过一次的某条弹幕下一次在调度就不需要了
  if (!item || this.idMap[item.id]) {
    return
  }
  let index = this.indexs[i]
  this.idMap[item.id] = item.id
  let div = document.createElement('div'),
    parent = document.querySelector(`${el} .barrage-list-${i}`),
    width,
    pastTime
  div.innerHTML = item.content
  div.className = 'barrage-item'
  parent.appendChild(div)
  width = getBoxSize(div).width
  div.style = `width:${width}px;display:none`
  pastTime = this.computeTime(width) //计算出下一条弹幕应该出现的时间
  //弹幕飞一会~
  this.run(div)
  if (index > this.list[i].length - 1) {
    return
  }
  let len = this.timeoutFuncs.length
  //记录好定时器,后面清空
  this.timeoutFuncs[len] = setTimeout(() => {
    this.indexs[i] = index + 1
    //递归调用下一条
    this.dispatchItem(this.list[i][index + 1], i, index + 1)
  }, pastTime);
}
//用css动画,整体还是比较流畅的
this.run = function (item) {
  item.classList += ' running'
  item.style.left = "left:100%"
  item.style.display = ''
  item.style.animation = `run ${this.speed/1000}s linear`
  //已完成的打一个标记
  setTimeout(() => {
    item.classList+=' done'
  }, this.speed);
}

//根据弹幕的宽度和gapWth,算出下一条弹幕应该出现的时间
this.computeTime = function (width) {
  let length = width + this.gapWidth
  let time = Math.round(length / this.boxSize.width * this.speed/2)
  return time
}

动画css具体如下

@keyframes run {
  0% {
    left: 100%;
  }

  50% {
    left: 0
  }

  100% {
    left: -100%;
  }
}
.run {
  animation-name: run;
}

其余方法

停止

利用动画的paused属性停止

this.stop = function () {
  let items = document.querySelectorAll(`${el} .barrage-item`);
  [...items].forEach(item => {
    item.className += ' pause'
  })
}
.pause {
  animation-play-state: paused !important;
}

重新开始

移除pause类即可

this.restart = function () {
  let items = document.querySelectorAll(`${el} .barrage-item`);
  [...items].forEach(item => {
    removeClassName(item, 'pause')
  })
}

打开关闭

做一个显示隐藏的逻辑即可

this.close = function () {
  this.container.style.display = 'none'
}
this.open = function () {
  this.container.style.display = ''
}

清理弹幕

this.clearData = function () {
  //清除list
  this.list = []
  //清除dom
  document.querySelector(`${el}`).innerHTML = ''
  //清除timeout
  this.timeoutFuncs.forEach(fun => clearTimeout(fun))
}

最后用一个定时器定时清理过期的弹幕:

setInterval(() => {
  let items = document.querySelectorAll(`${el} .done`);
  [...items].forEach(item=>{
    item.parentNode.removeChild(item)
  })
}, this.speed*5);

最后

感觉这个的实现还是有缺陷的,如果是你设计这么一个类,你会怎么设计呢?

到此这篇关于原生JavaScript实现弹幕组件的示例代码的文章就介绍到这了,更多相关JavaScript 弹幕组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
JS 类型转换常见方法小结
May 31 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
分享8个JavaScript库可更好地处理本地存储
Oct 12 #Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 #Javascript
Webpack5正式发布,有哪些新特性
Oct 12 #Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 #Javascript
移动端JS实现拖拽两种方法解析
Oct 12 #Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 #Javascript
vue实现移动端返回顶部
Oct 12 #Javascript
You might like
PHPMailer安装方法及简单实例
2008/11/25 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
javascript 数组的方法集合
2008/06/05 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python发送Email方法实例
2014/08/21 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
django输出html内容的实例
2018/05/27 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
python实现五子棋游戏
2019/06/18 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
冬季施工防火方案
2014/05/17 职场文书
教师节倡议书2015
2015/04/27 职场文书
python实现A*寻路算法
2021/06/13 Python
python实现MD5进行文件去重的示例代码
2021/07/09 Python
spring boot中nativeQuery的用法
2021/07/26 Java/Android