JavaScript 实现滚动弹幕

O_oregou

已于 2024-07-07 08:37:44 修改

阅读量1.5k

点赞数 1

文章标签： javascript 前端 css

于 2023-01-18 13:11:12 首次发布

本文链接：https://blog.csdn.net/O_osange/article/details/128725299

版权

效果要求：

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

实现原理：

绑定响应函数，并且设置一个随机数，调整弹幕出现的高度var top = Math.floor(Math.random()*300)

并且触发响应函数之后，创建一个新的div标签，设置好其的初始定位

创建倒计时计时器，在事件触发后，改变定位的位置，并且设置transition属性，控制弹幕划过的速度

代码展示：

html

<!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>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="page">
        <div id="view">

        </div>
        <div id="enter">
            <input type="text" placeholder="输入你想发送的弹幕" id="text">
            <input type="color" id="col">
            <button id="fs">发送</button>
        </div>
    </div>

    <script src="./index.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}

#page{
    width: 1202px;
    height: 602px;
    margin: 0 auto;
    margin-top: 20px;
    border: 1px solid black;

    overflow: hidden;
    position: relative;
}

#view{
    width: 100%;
    height: 602px;
    background-color: black;

    position: relative;
}

#enter{
    width: 100%;
    height: 0px;
    background-color: rgba(255, 255, 255, 0.2);

    position: absolute;
    bottom: 0;
}
#page:hover #enter{
    height: 40px;
    transition: all 0.5s;
}


#text{
    outline: none;
    width: 300px;
    height: 20px;
    padding-left: 10px;

    position: absolute;
    top: 8px;
    left: 300px;
}

#fs{
    width: 45px;
    height: 24px;

    position: absolute;
    top: 8px;
    left: 667px;
}

#col{
    width: 50px;
    height: 24px;

    position: absolute;
    top: 8px;
    left: 615px;
}

js

var page = document.getElementById("page")
var view = document.getElementById("view")
var enter = document.getElementById("enter")
var text = document.getElementById("text")
var col = document.getElementById("col")
var fs = document.getElementById("fs")

col.value = "#ffffff"

// 设置新增div的class属性名
var index = 1
fs.onclick = function () {
    console.log(col.value)

    // 设置弹幕的出现位置
    var top = Math.floor(Math.random()*300)
    // 获取弹幕的颜色
    var color = col.value
    // 获取弹幕的内容
    var wenzi = text.value
    // 如果弹幕内容为空值，结束响应函数
    if(wenzi == ""){
        return
    }

    // 创建一个div作为弹幕的容器
    var newDiv = document.createElement("div")

    // 为创建的div增加class属性
    newDiv.className = "danmu" + index

    // 将创建的div添加到view中
    view.appendChild(newDiv)

    // 获取创建的div
    var div = document.getElementsByClassName("danmu" + index)[0]
    div.style.backgroundColor = "transparent"
    div.style.color = color
    div.style.display = "inline-block"
    div.style.width = 1200 + "px"
    div.style.height = 20 + "px"
    div.style.position = "absolute"
    div.style.top = top + "px"
    div.style.right = -(parseInt(div.style.width)) + "px"

    // 将获取到的弹幕内容添加到div中
    div.innerHTML = wenzi

    // 设置弹幕滑动计时器
    var danmuTime = setTimeout(function () {
        div.style.right = 1200 + (parseInt(div.style.width)) + "px"
        div.style.transition = "all 15s linear"
    }, 0)

    index++
}

text.onfocus = function(){
    console.log("ok")
    document.onkeydown = function(e){
        if(e.key == "Enter"){
            console.log(col.value)

            // 设置弹幕的出现位置
            var top = Math.floor(Math.random()*300)
            // 获取弹幕的颜色
            var color = col.value
            // 获取弹幕的内容
            var wenzi = text.value
            // 如果弹幕内容为空值，结束响应函数
            if(wenzi == ""){
                return
            }
        
            // 创建一个div作为弹幕的容器
            var newDiv = document.createElement("div")
        
            // 为创建的div增加class属性
            newDiv.className = "danmu" + index
        
            // 将创建的div添加到view中
            view.appendChild(newDiv)
        
            // 获取创建的div
            var div = document.getElementsByClassName("danmu" + index)[0]
            div.style.backgroundColor = "transparent"
            div.style.color = color
            div.style.display = "inline-block"
            div.style.width = 1200 + "px"
            div.style.height = 20 + "px"
            div.style.position = "absolute"
            div.style.top = top + "px"
            div.style.right = -(parseInt(div.style.width)) + "px"
        
            // 将获取到的弹幕内容添加到div中
            div.innerHTML = wenzi
        
            // 设置弹幕滑动计时器
            var danmuTime = setTimeout(function () {
                div.style.right = 1200 + (parseInt(div.style.width)) + "px"
                div.style.transition = "all 15s linear"
            }, 0)
        
            index++
        }
    }
}