当前位置：首页 > 全部内容 > 原生JavaScript实现弹幕组件的示例代码

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

作者：拾光时间：2026-10-23 22:34:58浏览：615

本文介绍如何使用原生JavaScript封装一个弹幕类，包含容器节点、高度、模式、速度等属性及添加、开始、停止等方法，并提供初始化、插入数据、发射弹幕等示例代码。

前言

前言

弹幕类属性与方法定义

当前主流视频平台均具备弹幕功能，本文旨在通过原生 JavaScript 封装一个弹幕类。该类需包含以下属性及实例方法：

属性

  • el：容器节点的选择器，要求容器节点采用绝对定位，并预先设定宽高
  • height：单条弹幕的高度
  • mode：弹幕显示模式，half 表示占据容器高度的一半，top 表示三分之一，full 表示占满
  • speed：弹幕穿越屏幕所需的时间
  • gapWidth：相邻两条弹幕之间的间距

方法

  • pushData：添加弹幕原始数据
  • addData：持续注入弹幕数据
  • start：启动弹幕调度
  • stop：停止弹幕播放
  • restart：重置并重新开始弹幕
  • clearData：清空所有弹幕数据
  • close：关闭弹幕显示
  • open：重新显示弹幕

注：部分自封装的工具函数未在此展示，理解其功能即可

初始化与参数配置

初始化

引入 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')))
  }
}

利用 getComputedStyle API 计算容器宽高，此步骤用于获取容器尺寸，后续逻辑也会依赖该数据。


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 弹幕组件内容请查阅本站历史文章或继续阅读后续文章，感谢大家的支持！

作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

2026-11-05 16:12:28

JS怎么使用展开运算符合并对象

2026-11-05 14:42:18

ES6+环境下判断JS对象为空的简洁写法

2026-11-05 12:12:23

怎么通过replacer函数自定义JS中JSON的格式化输出

2026-11-05 11:19:44

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

2026-11-05 11:16:58