使用原生js实现一个弹幕效果

最新推荐文章于 2023-12-03 19:24:47 发布

zhaojiaxing123

最新推荐文章于 2023-12-03 19:24:47 发布

阅读量356

点赞数

分类专栏： js 文章标签： javascript css html

本文链接：https://blog.csdn.net/zhaojiaxing123/article/details/129397157

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章展示了如何利用HTML、CSS和JavaScript创建一个简单的弹幕显示功能。通过创建Barrage类，实现了弹幕从右到左移动的效果，用户还可以输入文本并发送弹幕。页面布局包括一个内容区域和一个输入发送区，弹幕速度随机且可清除。

摘要由CSDN通过智能技术生成

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
</head>

<body>
    <div class="container">
        <!-- 弹幕发送的内容区域  -->
        <div id="content" class="content"></div>
         <!-- 右边发送弹幕的样式 -->
        <div class="content-opt">
            <div id="content-text" class="content-text"></div>
            <div class="content-input">
                <input id="text" type="text">
                <button id="send">发送</button>
            </div>
        </div>
    </div>
</body>
<script src="main.js"></script>

</html>

css

* {
    box-sizing: border-box;
    outline: none;
}

/* 右边发送过的弹幕样式 */
p {
    margin: .5em;
    /* 根据断句换行 */
    word-break: break-all;
}

.container {
    position: relative;
    width: 700px;
    height: 500px;
    margin: auto;
}

/* 弹幕走动的区域 */
.content {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
}
/* 右侧弹幕发送的区域 */
.content-opt {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
}
/* 右边发送弹幕的上半部分 */
.content-text {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    border: 1px solid #ccc;
    overflow: auto;
}
/* 右边发送弹幕的下半部分 */
.content-input {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    border: 1px solid #ccc;
}
/*  弹幕输入框的样式 */
.content-input input {
    width: 70%;
    padding: 2px;
    border-radius: 5px;
}
/* 发送按钮样式 */
.content-input button {
    padding: 3px 10px;
    border: none;
    border-radius: 5px;
    background: rgb(90, 154, 214);
}

js

(function () {
    class Barrage {
        constructor(id) {
            this.domList = [];
            this.dom = document.querySelector('#' + id);
            if (this.dom.style.position == '' || this.dom.style.position == 'static') {
                this.dom.style.position = 'relative';
            }
            this.dom.style.overflow = 'hidden';
            let rect = this.dom.getBoundingClientRect();
            this.domWidth = rect.right - rect.left;
            this.domHeight = rect.bottom - rect.top;
        }
        // 发送弹幕
        shoot(text) {
            let div = document.createElement('div');
            div.style.position = 'absolute';
            div.style.left = this.domWidth + 'px';
            div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px';
            div.style.whiteSpace = 'nowrap';
            div.style.color = '#' + Math.floor(Math.random() * 256).toString(10);
            div.innerText = text;
            this.dom.appendChild(div);

            let roll = (timer) => {
                let now = +new Date();
                roll.last = roll.last || now;
                roll.timer = roll.timer || timer;
                let left = div.offsetLeft;
                let rect = div.getBoundingClientRect();
                if (left < (rect.left - rect.right)) {
                    this.dom.removeChild(div);
                } else {
                    if (now - roll.last >= roll.timer) {
                        roll.last = now;
                        left -= 3;
                        div.style.left = left + 'px';
                    }
                    requestAnimationFrame(roll);
                }
            }
            roll(50 * +Math.random().toFixed(2));
        }

    }
    // 获取整个屏幕的宽高
    let barage = new Barrage('content');

    console.log(barage.shoot);
    function appendList(text) {
        let p = document.createElement('p');
        p.innerText = text;
        document.querySelector('#content-text').appendChild(p);
    }

    document.querySelector('#send').onclick = () => {
        let text = document.querySelector('#text').value;
        barage.shoot(text);
        appendList(text);
    };
    // 所有的弹幕
    const textList = ['蜘蛛侠', '666', '233333333', 'javascript', 'html', 'css', '前端框架', 'Vue', 'React', 'Angular',
        '钢铁侠'
    ];
    textList.forEach((s) => {
        barage.shoot(s);
        // 向右侧弹幕添加发送过的弹幕
        appendList(s);
    })
})();