滚动弹幕.

最新推荐文章于 2024-05-30 11:27:58 发布

时不久留

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量580

点赞数

分类专栏：小案例文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_73104281/article/details/128714360

版权

小案例专栏收录该内容

17 篇文章 0 订阅

订阅专栏

需求

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

原理

利用Math,random设置字体大小，颜色。给文字的父标签span加上绝对定位，以及定时器，使其从左向右滚动。
给发送按钮绑定点击事件，使span.value=input.value并利用innerHTML发送至页面。
给打开和收起按钮分别绑定点击事件，改变其display状态，控制收起和弹出

<!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>
    <style>
        .bottom{
            position: fixed;
            bottom: 50px;
            left: 42%;
            text-align: center;
        }
        #two{
            display: none;
        }
        #one{
            position: fixed;
            bottom: 20px;
            left: 49%;
        }
        #one button{
            width: 60px;
            height:20px;
            font-size: 22px;
        }
        .box{
            height: 700px;
            width: 100%;
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="box"></div>

<div class="bottom">
    <div id="two">
        <input type="text" placeholder="请输入....." id="">
        <button id="sent" >发送</button>
        <button id="close">收起</button>
    </div>
    <div id="one">
        <button id="open">^</button>
    </div>
</div>
<script>
    window.onload = function(){
    var open=document.getElementById("one")
    var two=document.getElementById("two")
    open.onclick=function(){
        two.style.display="block"
        open.style.display="none"
    }
    var close=document.getElementById("close")
    close.onclick=function(){
        two.style.display="none"
        open.style.display="block"
    }
    
    var box=document.querySelector(".box")
    var input=document.querySelector("input")
    var sent=document.querySelector("#sent")
    
        sent.onclick = function() {
            var span=document.createElement("span")
            box.appendChild(span);
            span.innerHTML=input.value
            input.value=" "
            //随机颜色
            var top = parseInt(Math.random()*800);
            var Red = parseInt(Math.random()*256);
            var Green = parseInt(Math.random()*256);
            var Blue = parseInt(Math.random()*256);
            var color = 'rgb(' + Red + ',' + Green + ',' + Blue + ')';
            top = top < 0 ? 0 : top;
	        span.style.position = 'absolute';
            span.style.top = top + 'px';
            span.style.color = color;
            span.style.left = "1270px";
            span.style.fontSize = Math.random()*30+"px"
           
            setInterval(function(){
                var spanArray = box.childNodes;
                for(var i = 0 ; i < spanArray.length ; i++) {
                    spanArray[i].style.left = parseInt(spanArray[i].style.left) -1 +'px';
                    if( parseInt(spanArray[i].style.left) < -500 ) {
                        spanArray[i].style.left = 1270 + 'px';
                    }
                }
            },10)
        }
    }
</script>
</body>
</html>