JS小案例：实现直播弹幕效果

准备工作

一块幕布（即一个很大的盒子）和它的弹幕样式

        #videoBox {
            width: 1000px;
            height: 400px;
            background: black;
            margin: 30px auto;
            position: relative;
            overflow: hidden;
        }
        #videoBox>span {
            position: absolute;
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 24px;
        }

一个输入框
一个发送按钮

    <div id="videoBox">
        <span></span>
    </div>
    <div id="footerBox">
        <input type="text"><button>发送</button>
    </div>

js准备工作

一个获取节点对象的方法

            static $(tag) {
                return document.querySelector(tag);
            }

一个生成随机数以及一个生成随机十六进制颜色的方法

            static random(min, max) {
                return parseInt(Math.random() * (max - min) + min);
            }
            static color() {
                let c = `#`
                for (let i = 0; i < 6; i++) {
                    c += (Dm.random(0, 15).toString(16));
                }
                return c;
            }

一个获取页面最终渲染后节点对象css样式的方法

            static getStyle(ele, attr) {
                if (window.getComputedStyle) {
                    return getComputedStyle(ele, null)[attr]
                } else {
                    return ele.currentStyle[attr]
                }
            }

一个匀速动画

            static animation(ele, step, target, attr, callback) {
                clearInterval(ele.timer);
                ele.timer = setInterval(function() {
                    let start = parseInt(Dm.getStyle(ele, attr));
                    let res = start + step;
                    if (res >= target && step > 0) {
                        res = target;
                        clearInterval(ele.timer);
                        callback && callback()
                    }
                    if (res <= target && step < 0) {
                        res = target;
                        clearInterval(ele.timer);
                        callback && callback()
                    }
                    ele.style[attr] = res + 'px'
                }, 100)
            }

步骤

首先给class传递你要操作的三个参数

        class Dm {
             constructor(params = {}) {
                for (let attr in params) {
                    this[attr] = params[attr];
                }
                this.BtnFx();  //按钮功能
            }
        }
        new Dm({
            videoBox: '#videoBox',
            inp: '#footerBox>input',
            btn: '#footerBox>button'
        })

其次给发送按钮绑定点击事件

            BtnFx() {
                Dm.$(this.btn).onclick = () => {
// 使用箭头函数可以更方便地调用this
// 首先要获取文本框里的内容
                    let content = Dm.$(this.inp).value;
// 不能为空发送
                    if (!content) return
// 获取直播显示区域的高度，使用offsetHeight属性，根据需要显示半屏还是全屏还是四分之一屏
                    let boxH = Dm.$(this.videoBox).offsetHeight / 2;
// 获取直播显示区域的宽度，使用offsetWidth属性，这将是你弹幕的起始点
                    let boxW = Dm.$(this.videoBox).offsetWidth
// 这里可以直接写一个节点对象，也可以把参数传递给一个专门的函数处理
                    let spanObj = this.createSpan(content, Dm.color(), Dm.random(0, boxH), boxW)
// 把创建好的节点对象追加到直播显示区域中
                    Dm.$(this.videoBox).appendChild(spanObj)
// 给创建好的节点对象绑定动画，并在回调函数里写上结束后删除自身
                    Dm.animation(spanObj, -10, -100, 'left', function() {
                        spanObj.remove()
                    })
                }
            }

 创建节点对象的方法

            createSpan(text, color, top, left) {
// 只需要搜集四个参数，文本内容，字体颜色，上下位置，起始位置
                let span = document.createElement('span');
                span.innerHTML = text;
// 使用Object.assign()快速赋值
                Object.assign(span.style, {
                    color: color,
                    top: top + 'px',
                    left: left + 'px'
                })
                return span
            }

 最终效果：

 

总结：直播弹幕是实时进行，有时间再思考视频弹幕如何保存和播放，大致理论是保存时间戳，只精确到秒，需要用到数据库保存内容和时间，具体如何再作研究。

谢谢观看至此！！！