简版弹幕实现。HTML+CSS+JAVASCRIPT

最新推荐文章于 2022-11-22 10:07:43 发布

东京没有柳州热

最新推荐文章于 2022-11-22 10:07:43 发布

阅读量397

点赞数

本文链接：https://blog.csdn.net/weixin_51175605/article/details/109893987

版权

思路：
1、设置video
2、设置输入框
3、获取输入框的内容，添加、删除和更新
4、里面运用了单厂模式，每次生成的例子都是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #videobox{
            width: 640px;
            height: 410px;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }
        input{
            width: 630px;
            height: 40px;
            font-size: 20px;
            border: 2px solid #8b8a8a;
        }
    </style>
</head>
<body>
    <div id="videobox">
        <video src="./huawuyu.mp4" controls></video>
        <input type="text" placeholder="发个友善的弹幕见证当下吧~"> 
    </div>
    <script type="module">
        // 引入弹幕js文件
        import Bullet from "./js/Bullet.js"
        // 获取输入框
        var input = document.querySelector("input");

        // 获取键盘事件
        document.addEventListener("keyup",keyHandler);
        // 设置键盘事件
        function keyHandler(e){
            // 如果输入的不是回车键13，跳出
            if(e.keyCode !== 13) return;
            // 如果是空的，也跳出
            if(input.value.trim().length===0) return;
            // 创建bullet,里面的值是输入框的值
            var bullet = new Bullet(input.value);
            // 添加到videobox盒子下
            bullet.appendTo("#videobox")
            // 每次输入完后，清空输入框
            input.value = "";
        }
    </script>
</body>
</html>

// 设置Time类
export default class Time{
    static _instance;
    list = new Set()
    isd;

    constructor(){

    }
    // 单例模式 让每次都是创建相同的例子
    static get instance(){
        if(!Time._instance){
            // 设置属性
            Object.defineProperty(Time,"_instance",{
            value:new Time()
            })
        }
        return Time._instance;
    }
    
    // 添加
    add(elem){
        // 把元素放入list
        this.list.add(elem);
        // 如果列表大于零  且 ids没有开启
        if(this.list.size>0 && !this.ids)
        // 执行updata，16毫秒执行一次
        this.ids=setInterval(()=>this.update(),16)
    }
    
    // 删除
    remove(elem){
        // 删除列表的元素
        this.list.delete(elem);
        // 如果列表长度是零 且 存在ids
        if(this.list.size===0 && this.ids){
            // 清除定时器
            clearInterval(this.ids)
            // ids设置为空
            this.ids=0;
        }
    }

    // 更新
    update(){
        // 循环，每次更新
        this.list.forEach(item=>{
            if(item.update) item.update();
        })
    }
}

// 引入js文件
import Time from "./Time.js";

export default class Bullet{
    rect;
    x;
    speed=2
    width;

    // 初始化，实参等于输入框的文本
    constructor(txt){
        // 创建文本元素
        this.elem = this.createElem(txt);
    }
    
    // 创建文本元素
    createElem(txt){
        // 如果存在，就用这个元素
        if(this.elem) return this.elem;
        // 获取div
        var div = document.createElement("div")
        // 给div设置样式
        Object.assign(div.style,{
            // 白色
            color:"#ffffff",
            // 字体粗细
            fontWeight:"600",
            // 不换行
            whiteSpace:"nowrap",
            // 绝对定位
            position:"absolute",
        })
        // div的文本等于输入框的文本
        div.textContent = txt
        // 返回div
        return div
    }

    // 添加至父容器
    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;
        // 添加到类中
        Time.instance.add(this)
    }

    // 更新数据
    update(){
        // 如果没有数据跳出
        if(!this.width) return;
        // 减速设置
        this.x -=this.speed
        // 减速设置
        this.elem.style.left = this.x+"px"
        // 当宽度小于父容器宽度时
        if(this.x<-this.width){
            // 移除例子
            Time.instance.remove(this);
            // 移除元素
            this.elem.remove();
            // 给元素设置为null
            this.elem = null;
        }
    }
}

东京没有柳州热

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简版弹幕实现。HTML+CSS+JAVASCRIPT

输入思路：1、设置video2、设置输入框3、获取输入框的内容，增删改查<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .
复制链接

扫一扫