• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

基于ES6利用观察者模式完成视频弹幕功能

互联网 diligentman 1周前 (11-21) 11次浏览

bullet.js文件如下

import TimeManager from "./TimeManager.js";

export default class Bullet{
    rect;
    x;
    speed=2;
    width;
    col;
    constructor(txt){
        this.elem=this.createElem(txt);
    }
    createElem(txt){
        if(this.elem) return this.elem;
        var div = document.createElement("div");
        this.randomColor();
        Object.assign(div.style,{
            whiteSpace: "nowrap",
            position:"absolute",
            fontSize:"20px",
            color:this.col
        })
        div.textContent=txt
        return div;
    }
    randomColor() {
        this.col = "#";
        for (var i = 0; i < 6; i++) {
            this.col += Math.floor(Math.random() * 16).toString(16);
        }
    }
    appendTo(parent){
        if(typeof parent==="string") parent=document.querySelector(parent);
        parent.appendChild(this.elem);
        this.rect=parent.getBoundingClientRect();
        Object.assign(this.elem.style,{
            top:Math.random()*this.rect.height/4+"px",
            left:this.rect.width+"px"//注意插入开始时是放在视频容器右边外边的
        });
        this.x=this.rect.width;
        this.width=this.elem.offsetWidth;
        TimeManager.instance.add(this);//当弹幕对象创建好添加到视频容器中之后,再将其添加到观察者的单例对象的list上
    }
    update(){
        if(!this.width) return;
        this.x-=this.speed;
        this.elem.style.left=this.x+"px";
        if (this.x < -this.width) {//这步是弹幕对象移动了整个视频容器的位置+本身文本撑开的宽度
            //当弹幕播放完之后删除,观察者单例对象的list上,dom结构中以及堆中都要删除
            TimeManager.instance.remove(this);
            this.elem.remove();
            this.elem=null;
        }
    }
}

喜欢 (0)