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

前言

如今几乎所有的视频网站都有弹幕功能,那么今天我们就自己用原生 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 弹幕组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-10-10

javascript实现视频弹幕效果(两个版本)

本文实例为大家分享了javascript实现视频弹幕效果的具体代码,供大家参考,具体内容如下 基础版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; height: 600px; background-color:

基于JavaScript实现弹幕特效

本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下 此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教. 注意用的是jquery-2.0.3.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css&

JS实现的视频弹幕效果示例

本文实例讲述了JS实现的视频弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>斗鱼

简单实现JavaScript弹幕效果

不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非常简单啦. 就是由一个div.一个input框另加一个button组成. <div id="box" class="box"></div> <input type="text" id="txt" /&

利用JS代码自动删除稿件的普通弹幕功能

事情的起因是在b站投稿了一个高级弹幕测试的视频(av9940487),但是由于b站的弹幕池机制是新的弹幕顶掉旧的弹幕,所以导致一些人发的高级弹幕很快就被顶掉了. 所以就想着写个脚本来自动删除属性为普通的弹幕,语言用的是javascript,在chrome的控制台就可以执行这个脚本. 1.删除弹幕的流程分析 判断弹幕A是否为普通弹幕,是则选中. 点击删除弹幕的按钮,弹出二次确认框. 点击确定,成功删除. 2.删除弹幕相关的html代码,js代码2.1 选中 可通过判断class属性为"item-f

js实现弹幕飞机效果

本文实例为大家分享了js实现弹幕飞机效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ width: 70vw;/*长宽最好是obj的倍数*/ height: 90vh; border-width:

JavaScript直播评论发弹幕切图功能点集合效果代码

一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl

javascript实现弹幕墙效果

刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙. 步骤如下: 1.编写HTML代码: 创建一个弹幕显示墙,以及两个按钮,分别为"发送"和"清屏",并在文本框中设置placeholder为"说点什么吧?"以提示用户在此输入弹幕信息. <body> <div class="con"> <div id="screen"> <div class=

基于javascript实现窗口抖动效果

本文实例讲解了基于javascript实现窗口抖动效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 鼠标点击,窗口实现抖动. 具体代码: <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"/> <title>窗口登陆效果</title> <style type="text/css"> #win { position:r

JavaScript实现开关等效果

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>开关灯</title> <style type="text/css"> html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; cur

基于JavaScript实现图片剪切效果

学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第一层opacity,给图层设置透明度 2.第二层clip,clip属性:对图片进行裁剪,实现图像的一部分显示,其他部分进行隐藏 3.第三层选取框absolute(与第二层重叠的),包括八个触点的效果 html代码: <div id="box"> <img src=&quo

Javascript实现飞动广告效果的方法

本文实例讲述了Javascript实现飞动广告效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

基于JavaScript实现无缝滚动效果

本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下 首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝对定位 ,否则它根本无法滚动,而它相对于div1滚动 ,则div1就作为他的相对定位. oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;这段代码是实现无缝滚动的核心,使之可以在不论左右滚动的时候都有下一步图片接上去. 在操作或者进行比较的时候,都要用offset取

JavaScript实现滚动栏效果的方法

本文实例讲述了JavaScript实现滚动栏效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #div1 ul{ position: absolute; le

JavaScript实现带缓冲效果的随屏滚动漂浮广告代码

本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/ 具体代码如下: <html

javascript实现简单计算器效果【推荐】

最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分?? 图-1 图-2 HTML代码如下 <body> <div id="calculator"> <div class="LOGO"> <span class="name">简单的计算器</span

JavaScript仿微博输入框效果(案例分析)

这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿微博输入框效果</title> <script src="jquery.js"></script> </h