原生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 弹幕组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 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实现弹幕墙效果

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

  • js实现弹幕飞机效果

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

  • 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>斗鱼

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

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

  • 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弹幕效果

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

  • 基于JavaScript实现弹幕特效

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

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

    前言 如今几乎所有的视频网站都有弹幕功能,那么今天我们就自己用原生 JavaScript 封装一个弹幕类.这个类希望有如下属性和实例方法: 属性 el容器节点的选择器,容器节点应为绝对定位,设置好宽高 height 每条弹幕的高度 mode 弹幕模式,half则为一半容器高度,top为三分之一,full为占满 speed弹幕划过屏幕的时间 gapWidth后一条弹幕与前一条弹幕的距离 方法 pushData 添加弹幕元数据 addData持续加入弹幕 start开始调度弹幕 stop停止弹幕 r

  • 原生JavaScript实现模态框的示例代码

    目录 原生js封装模态框 示例效果 代码 原生js封装模态框 最近需要一个模态框,然后一种是提示类的,一种是确认类型,我就想着再网上找一个然后修改一下,结果找到了,但是不深特别合适,我再次基础上在做了修改,对功能有所增强,纯原生写的,没有任何依赖性,适应性比较强,值copy即可使用. 配置:可以在实例化时对options进行参数设置,达到自己想要的效果 示例效果 代码 HTML部分 <head> <meta charset="utf-8"> <title&

  • 原生JS实现日历组件的示例代码

    想要实现的效果 点击日期选择框出现日历 有个日期控制栏帮助选择日期, 包括年.月.日的选择和今天 日历格子,初次点击日期选择框时显示此刻的日期,日历格子的日期应该包括这个月的所有天数,同时如果当月的1号不是周日,还应补全从周日到1号的天数.还要在这个月最后1号的后面补全到周六. 日期控制栏和日历格子的日期还有选择框里的日期的变化要是同步的. 实现思路 为了组件的可复用性,需要用面向对象的思想. 每个日历组件都是一个日历对象,主要包括日期选择框,日期控制显示栏,还有日历格子,为了保持日期控制显示栏

  • 原生javascript AJAX 三级联动的实现代码

    js 三级联动的实现代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生ajax</title> </head> <body> <select name="sel1"> <option value=""

  • 使用Python获取爱奇艺电视剧弹幕数据的示例代码

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于数据STUDIO,作者龙哥带你飞 Python分析抖音用户行为数据视频讲解地址 https://www.bilibili.com/video/BV1yp4y1q7ZC/ 数据获取是数据分析中的重要的一步,数据获取的途径多种多样,在这个信息爆炸的时代,数据获取的代价也是越来越小.因此如此,仍然有很多小伙伴们无法如何获取有用信息.此处以最近的热播排行榜第一名的<流金岁月>为例,手把手

  • Vue3+TS实现语音播放组件的示例代码

    目录 第一步:点击拖拽进度条 第二步:操作媒体音频 第三步:进度条和播放进度关联 完整代码 该功能将使用vue3 + TS来实现语音播放组件,使用什么技术不重要,重要的是看懂了核心逻辑后,通过原生js.react.vue2等都可以轻松实现 所涉及到重要点有以下几个: (1)进度条的实现:拖拽进度条.点击进度条 (2)操作audio语音播放:通过js操作audio媒体 (3)播放进度与进度条紧密关联:播放的进度改变时,进度条也随之改变:进度条改变时,播放的进度也随之改变 效果图: 开始我们的设计吧

  • JavaScript中removeChild 方法开发示例代码

    1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove

  • 开发Vue树形组件的示例代码

    本文介绍了Vue树形组件的示例代码,分享给大家,具体如下: 使用SemanticUI和vue做一个menubar组件,实现方法大概是这样的: <template> <div class="ui menu"> <template v-for="item in leftItems"> <a " v-if="!item.children" @click="item.click"&g

  • 基于vue的tab-list类目切换商品列表组件的示例代码

    在大多数电商场景中,页面都会有类目切换加上商品列表的部分,页面大概会长这样 每次写类似场景的时候,都需要去为类目商品列表写很多逻辑,为了提高开发效率我决定将这一部分抽离成组件. 实现 1.样式 所有tab栏的样式和商品列表的样式都提供插槽,供业务自己定制 2.变量 isTabFixed: false,//是否吸顶 tab: 1,//当前tab page: 1,//当前页数 listStatus: { finished: false,//是否已是最后一页 loading: false,//是否加载

  • react实现Radio组件的示例代码

    本文旨在用最清楚的结构去实现一些组件的基本功能.希望和大家一起学习,共同进步 效果展示: 测试组件: class Test extends Component { constructor(props) { super(props) this.state = { active:1 } } onGroupChange(value) { this.setState({ active: value }) } render() { return ( <div> <RadioGroup onChan

随机推荐