发送滚动弹幕-优快云博客

本文链接：https://blog.youkuaiyun.com/Sodapease/article/details/128724815

该文章展示了如何使用HTML、CSS和JavaScript实现一个动态滚动弹幕的功能。页面上有从左至右滚动的弹幕，字体大小和颜色随机，底部有一个输入框和发送按钮，用户可以输入自定义弹幕并发送。此外，发送区域还可以通过toggle方法实现显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

发送滚动弹幕

需求
实现原理
代码
效果展示

需求

页面上漂浮字体大小不一、颜色不—，从左向右滚动的弹幕;
底部中间有一个发送功能，可以发送新的弹幕;
底部的发送部分可以向下收起和弹出。

实现原理

需求	实现原理
页面上漂浮字体大小不一、颜色不—，从左向右滚动的弹幕;	导入初始滚动弹幕内容，给每条弹幕设置初始轨道随机飘入屏幕中，调用随机函数设置字体的大小和颜色
页面上漂浮字体大小不一、颜色不—，从左向右滚动的弹幕;	给滚动弹幕内容飘出设置定时器，获取盒子的左偏移量判断弹幕消失后进行删除
底部中间有一个发送功能，可以发送新的弹幕	设置input输入框，先取出输入框内容，添加到新创建的弹幕盒子，并给盒子内容设置样式
底部中间有一个发送功能，可以发送新的弹幕
底部的发送部分可以向下收起和弹出	调用toggle()方法实现发送弹幕的显示与隐藏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sendConScreen</title>
</head>
<style>
     * {
        padding: 0;
        margin: 0;
    }
    .send {
        width: 600px;
        height: 60px;
        /*background: black*/
        margin: 0 auto;
    }
    .send input {
        width: 300px;
        height: 40px;
        border: 1px solid #b0b0b0;
        border-radius: 7px;
        padding-left: 15px;
        margin-top: 10px;
        outline: none;
    }
    .send button {
        width: 80px;
        height: 40px;
        border: none;
        margin-left: 10px;
        background-color: #ff6699;
        border-radius: 8px;
        color: white;
        cursor: pointer;
    }
    .content {
        margin: 0 auto;
        width: 1000px;
        height: 600px;
        background: url(./barrage.gif);
        background-size: cover;
        position: relative;
        overflow: hidden;
    }

    .sendCon {
        position: absolute;
    }
    #initial {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        font-size: 50px;
    }

    #initial .initialon {
        height: 50px;
        line-height: 50px;
        position: absolute;
        overflow: hidden;
        /* color: #fff */
    }
    .left{
        position: absolute;
        top: 625px;
        left: 500px;
        width: 10px;
        height: 10px;
        background-color: transparent;
        transform: rotate(45deg);
        border-left: 5px solid #b0b0b0;
        border-bottom: 5px solid#b0b0b0;
        border-top: transparent;
        border-right: transparent;
        cursor: pointer;
    }
</style>
<body>
    <div class="container">
        <div class="content">
            <div id="initial"></div>
        </div>
        <div class="left"></div>
        <div class="send">
            <input type="text" />
            <button>发送</button>
        </div>
    </div>
    <script type="text/javascript" src="jquery-3.6.3.js"></script>
    <script type="text/javascript">
        //导入初始滚动弹幕内容
        const data = ['阴羊怪气', '呆jio不', '阳勿运动', '中日结合', '阿里嘎多美羊羊桑', '拱火の好兄弟', '跨服聊天', '我咋地她了']
        const initial = document.getElementById('initial')
        const iniHeight = initial.clientHeight//获取初始弹幕高度（含内边距）
        function insert() {
            const initialon = document.createElement('div')//创建初始滚动的弹幕盒子
            const randomIni = Math.floor(Math.random() * 8)//随机化初始弹幕内容
            initialon.innerHTML = data[randomIni]//将随机初始弹幕内容添加进盒子
            initialon.className = 'initialon'//添加class类名
            const top = iniHeight - 50
            const initialonTop = Math.floor(Math.random() * (top - 1))//设置弹幕随机高度
            const initialonLeft = initial.clientWidth//声明初始弹幕内容宽度
            initialon.style.left = initialonLeft + 'px'//设置每条弹幕left间隔
            initialon.style.top = initialonTop + 'px'//设置每条弹幕top间隔
            initial.appendChild(initialon)//每个弹幕盒子放入初始弹幕容器中
            $('.initialon').css("font-size", Math.round(Math.random() * 60) + 12 + "px")
            $('.initialon').css("color", "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ")")
            move(initialon)//调运弹幕自动移动函数
            
        }
        function move(obj) {
            const timer1 = setInterval(() => {//给滚动弹幕内容飘出设置定时器
                const initialonWidth = obj.clientWidth//获取移动弹幕宽度
                let run = obj.offsetLeft//获取弹幕的左侧偏移量
                run--
                if (run <= -initialonWidth) {
                    initial.removeChild(obj) //若偏移量小于弹幕宽度的负数则在容器中移除这条
                    clearInterval(timer1)//清除定时器
                }
                obj.style.left = run + 'px'//获取单个弹幕盒子的左边距
            }, 1)
        }
        const timer2 = setInterval(() => {
            insert() //设置定时器调用嵌入的初始弹幕
        }, 1000)//限定一秒弹出一条弹幕
        window.onblur = function () {//窗口不聚焦时清除定时器，不进行弹幕滚动
            clearInterval(timer2)
        }
        $('.left').click(function(){
           $('.send').toggle() //调用toggle方法实现发送弹幕的显示与隐藏
        })
        $("button").click(function () {
            const con = $("input").val()
            //取出输入框内容 
            //限定输入框字数
            if (con.length > 20) {
                alert("字数不得超过20个！")
                return
            }
            const sendCon = $("<div>")//创建一条弹幕 
            sendCon.text(con)//将输入框内容放置到div中 
            sendCon.addClass("sendCon")
            //为sendCon这个div添加样式sendCon 
            sendCon.css("top", Math.round(Math.random() * 500))//随机设置弹幕位置 
            sendCon.css("left", "1600px")
            sendCon.css("font-size", Math.round(Math.random() * 60) + 12 + "px")
            sendCon.css("color", "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ")")
            // alert(window.getComputedStyle(sendCon,null).width) 
            sendCon.animate({
                left: -1000
            }, Math.round(Math.random() * 9000) + 1000, "linear", function () {
                sendCon.remove()
                //当运动结束时，删除弹幕 
            })
            $(".content").append(sendCon)
            //将弹幕添加到屏幕中 
        }) 
    </script>
</body>
</html>