Javascript栏目今天为大家介绍原生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: &＃39;#container&＃39;}) 

参数初始化：

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 || &＃39;half&＃39;
    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(&＃39;p&＃39;)))
    }
} 

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

function initRows(box, mode, height) {    let pisor = getpisor(mode)
    rows = Math.ceil(box.height * pisor / height)    return rows
}function getpisor(mode) {    let pisor = .5
    switch (mode) {        case &＃39;half&＃39;:
            pisor = .5
            break
        case &＃39;top&＃39;:
            pisor = 1 / 3
            break;        case &＃39;full&＃39;:
            pisor = 1;            break
        default:            break;
    }    return pisor
} 

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

插入数据

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

this.pushData = function (data) {    this.initDom()    if (getType(data) == &＃39;[object Object]&＃39;) {        //插入单条
        this.pushOne(data)
    }    if (getType(data) == &＃39;[object Array]&＃39;) {        //插入多条
        this.pushArr(data)
    }
}this.initDom = function () {    if (!document.querySelector(`${el} .barrage-list`)) {        //注册dom节点
        for (let i = 0; i 
this.pushOne= function (data) {    for (let i = 0; i  {        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 
持续加入数据的方法只是调用了添加源数据的方法，并且开始了调度而已
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 
this.dispatchItem = function (item, i) {    //调度过一次的某条弹幕下一次在调度就不需要了
    if (!item || this.idMap[item.id]) {        return
    }    let index = this.indexs[i]    this.idMap[item.id] = item.id    let p = document.createElement(&＃39;p&＃39;),
        parent = document.querySelector(`${el} .barrage-list-${i}`),
        width,
        pastTime
    p.innerHTML = item.content
    p.className = &＃39;barrage-item&＃39;
    parent.appendChild(p)
    width = getBoxSize(p).width
    p.style = `width:${width}px;display:none`
    pastTime = this.computeTime(width) //计算出下一条弹幕应该出现的时间
    //弹幕飞一会~
    this.run(p)    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 += &＃39; running&＃39;
    item.style.left = "left:100%"
    item.style.display = &＃39;&＃39;
    item.style.animation = `run ${this.speed/1000}s linear`
    //已完成的打一个标记
    setTimeout(() => {
        item.classList+=&＃39; done&＃39;
    }, 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 += &＃39; pause&＃39;
    })
} 
.pause {    animation-play-state: paused !important;
} 
重新开始
移除pause类即可
this.restart = function () {    let items = document.querySelectorAll(`${el} .barrage-item`);
    [...items].forEach(item => {
        removeClassName(item, &＃39;pause&＃39;)
    })
} 
打开关闭
做一个显示隐藏的逻辑即可
this.close = function () {    this.container.style.display = &＃39;none&＃39;}this.open = function () {    this.container.style.display = &＃39;&＃39;} 
清理弹幕
this.clearData = function () {    //清除list
    this.list = []    //清除dom
    document.querySelector(`${el}`).innerHTML = &＃39;&＃39;
    //清除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实现弹幕组件de方法的详细内容，更多请关注 第一PHP社区 其它相关文章！