案例：滚动弹幕

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

实现原理：
1、设置发送按钮的点击事件，事件函数中创建新节点，并js中取得文本框valu值后赋给新建节点实现弹幕的出现
2、在js中设置不同的随机数并增长合适倍数后赋予文本的style属性从而获得不同颜色，大小，位置高度不同的弹幕
3、使用间隔计时器不断改变弹幕元素的position位置属性从而实现弹幕的滚动，当滚动到边缘时初始化位置属性，使其重复滚动
实现代码：
HTML部分：

    <div class="box">
        <input type="text" name="" id="content">
        <input type="submit" name="" id="fasong" value="发送">
        <span id="shang">▲</span>
        <span id="xia">▼</span>
    </div>

CSS部分：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
        background-color: skyblue;
        }
        .box{
            width: 400px;
            position: absolute;
            bottom: 40px;
            left:40%;
            
        }
        .box #content{
            width: 250px;
            outline: none;
            height: 20px;
            border: 0.5px solid gray;
            border-radius:8px ;
        }
        span{
            color: white;
            cursor: pointer;
        }
        #shang{
            display: none;
            position: absolute;
            bottom:-35px;
            left: 290px;
        }
        #xia{
            display: inline;
        }
    </style>

JS部分：

        //发送按钮的点击事件
        $("#fasong").click(function(){
        //创建新节点
        var div= document.createElement("div")
        //将输入信息赋予新节点
        div.innerHTML=document.getElementById("content").value
        div.classList.add="new_div"
        $("body").append(div)
        //获取并设置top,font_size,color的随机数值
        var newram_po=Math.floor(Math.random()*600)
        var newram_si=Math.floor(Math.random()*30)
        var newram_co=Math.floor(Math.random()*1200)
        div.style.position="absolute"
        div.style.top=newram_po+"px"
        div.style.fontSize=newram_si+"px"
        div.style.color="#"+newram_co
        //设置计时器实现弹幕滚动
        setInterval(function(){
            var lefts=parseInt(getComputedStyle(div).left)
            var rights=parseInt(getComputedStyle(div).right)
           /* console.log(lefts) */
           div.style.left=lefts+1+"px"
           //弹幕到达边缘后初始化位置
           if(rights==0){
               div.style.left=0
           }
        },10)
        })
        //倒三角点击事件
        $("#xia").click(function(){
            $("#xia").css(`display`,`none`)
            $("#content").css(`display`,`none`)
            $("#fasong").css(`display`,`none`)
            $("#shang").css(`display`,`inline`)
        })
        $("#shang").click(function(){
            $("#xia").css(`display`,`inline`)
            $("#content").css(`display`,`inline`)
            $("#fasong").css(`display`,`inline`)
            $("#shang").css(`display`,`none`)
        })

效果：

弹幕