拿来即用，html+css+js原生实现简易的弹幕效果

Su__py

已于 2022-06-24 16:08:24 修改

阅读量1.9k

点赞数 2

分类专栏：前端web

于 2022-06-24 15:58:14 首次发布

本文链接：https://blog.csdn.net/su__py/article/details/125446379

版权

HTML CSS JavaScript 弹幕效果前端开发

关键词由CSDN通过智能技术生成

前端web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

闲来无事，做了一个弹幕效果，话不多说，直接上代码，拿来即用。
下面是html代码：

<body>
    <div class="barrageBox"></div>
    <div class="barrageButton">
        <input type="text" id="input">
        <button id="button">发送</button>
    </div>
</body>

下面是css代码：

 <style>
        body {
            width: 100%;
            height: 100%;
        }
        .barrageBox {
            width: 1100px;
            height: 500px;
            border: 1px solid orange;
            box-sizing: border-box;
            position: relative;
            margin: 200px auto;
            overflow: hidden;
        }
        .box {
            position: absolute;
            visibility: hidden;
            animation: barrage 6s linear 0s;
            /* 这个是循环播放的属性，需要就加上 */
            /* animation-play-state: paused; */
        }

        /* 鼠标划入时暂停动画 */
        .box:hover {
            animation-play-state: paused;
        }

        @keyframes barrage {
            from {
                left: 100%;
                visibility: visible;
                transform: translateX(0);
            }

            to {
                left: 0%;
                visibility: visible;
                transform: translateX(-100%);
            }
        }

        .barrageButton {
            position: absolute;
            width: 1100px;
            top: 730px;
            left: calc(50% - 540px);
        }
    </style>

下面是js的代码：

<script>
    // 思路：1、有一个用于播放弹幕的方框 2、抽离不同的参数，距离顶部的距离，用定时器每秒生成一个，是循环生成的，如果数量过多就删除循环。
    let barrageList = ['干得漂亮', '做得好', '你是最棒的', '真的非常非常棒', '今晚打老虎', '佛曰：不可说', '已所不欲，勿施于人', '三人行，必有我师焉，择其善者而从之，其不善者而改之']

    let topList = [20, 40, 60, 80, 100, 120, 140, 160, 180, 200] //随机娶一个数，是到顶部的距离的

    let num = Math.floor(Math.random() * 10) // 随机生成一个数，然后取一个距离顶部的位置 

    let barrageBox = document.querySelector('.barrageBox')

    function createBarrage(barrageList) {
        for (let index = 0; index < barrageList.length; index++) {
            (function (index) {
                setTimeout(() => {
                    let num = Math.floor(Math.random() * 10)
                    let div = document.createElement('div')
                    div.innerText = barrageList[index]
                    div.classList.add('box')
                    div.style.top = topList[num] + 'px'
                    div.style.color = 'rgb(' + my_rgb() + ')' //随机生成一个颜色的
                    barrageBox.appendChild(div)
                }, index * 1000);
            })(index)
        }
    }

    createBarrage(barrageList)

    // 动画循环播放 差不多就是所有的元素都走了一遍，才会一起走第二遍 时间的计算是这样的：每隔一秒生成一个，到最后一个走完，6s是走完一遍的动画，就是长度+6的时间，如果弹幕的数量足够多，这个可以删除
    var my_set = setInterval(() => {
        barrageBox.innerHTML = ''
        createBarrage(barrageList)
    }, (barrageList.length + 6) * 1000);

    // 随机生成一个颜色的
    function my_rgb() {
        let r = Math.floor(Math.random() * 256)
        let g = Math.floor(Math.random() * 256)
        let b = Math.floor(Math.random() * 256)
        return r + ',' + g + ',' + b
    }

    let button = document.getElementById('button')
    let input = document.getElementById('input')


    // 点击增加弹窗，就是增加一个div
    button.onclick = function () {
        if (!input.value) return
        barrageList.push(input.value)

        let num = Math.floor(Math.random() * 10)
        let div = document.createElement('div')
        div.innerText = input.value
        div.classList.add('box')
        div.style.top = topList[num] + 'px'

        // 加上边框，醒目标志
        div.style.border = '1px solid red'
        div.style.borderRadius = 10 + 'px'
        div.style.padding = '5px 10px'

        div.style.color = 'rgb(' + my_rgb() + ')' //随机生成一个颜色的
        barrageBox.appendChild(div)
        input.value = ''

        clearInterval(my_set)
        
        // 因为清除的话会重新计算时间，会造成一段时间的空白期，所以需要渲染一次。
        createBarrage(barrageList)
        my_set = setInterval(() => {
            barrageBox.innerHTML = ''
            createBarrage(barrageList)
        }, (barrageList.length + 6) * 1000);

    }
</script>