滚动弹幕（JS/HTML/CSS）

需求：

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

原理：

创建两个数组分别装文字颜色和大小，将上面box里放入input输入的内容，用span标签包裹，利用定时器实现文字从左向右滚动，每隔一段时间向右移动一段距离，如果弹幕滑到可视区域以外就被销毁

效果图：

滚动弹幕

代码块：

    


    
    

        
        发送
    
    收起
    弹出

window.onload=function(){
    // 创建两个数组分别装文字颜色和大小
    var Color = ["red","yellow","blue","green","pink","black","aqua","peru","salmon","purple"]
    var Size = ["14px","16px","18px","25px","20px","22px"]
    // 获取按钮，点击按钮发送弹幕
    var btn = document.querySelector("button")
    var top = document.querySelector(".top")
    var input = document.querySelector("input")
    btn.onclick=function(){
        // 将上面box里放入input输入的内容，用span标签包裹
        var span = document.createElement("span")
        top.appendChild(span)
        span.innerHTML=input.value
        // 给这个标签一个随机高度和颜色还有大小
        span.style.fontSize = Size[Math.round(Math.random()*7)]
        span.style.color = Color[Math.round(Math.random()*11)]
        span.style.top = Math.round(Math.random()*500)+"px"
        // 实现文字从左向右滚动，利用定时器，每隔一段时间向右移动一段距离
        var step = 0
        var timer = setInterval(() => {
            step++
            span.style.left =step+"px" 
            // 如果弹幕滑倒可视区域以外就被销毁
            var move = span.offsetLeft+span.clientWidth
            if(move-window.innerWidth==20){
                clearInterval(timer)
                top.removeChild(span)
            }
        }, 25);
    }
    btn.onmouseleave=function(){
        input.value=""
    }
    var a1 = document.querySelector(".a1")
    a1.onclick=function(){
        var bottom = document.querySelector(".bottom")
        // bottom.style.display = "none"
        bottom.style.height=90+"px"
        top.style.height=750+"px"
    }
    var a2 = document.querySelector(".a2")
    a2.onclick=function(){
        var bottom = document.querySelector(".bottom")
        // bottom.style.display = "none"
        bottom.style.height=240+"px"
        top.style.height=600+"px"
    }
}