滚动弹幕~

ZiminLi

已于 2023-01-12 23:50:30 修改

阅读量621

点赞数

分类专栏： demo 文章标签：前端

于 2023-01-12 23:24:24 首次发布

本文链接：https://blog.csdn.net/ziminli/article/details/128667944

版权

demo 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

该文演示了一个使用HTML、CSS和JavaScript创建的滚动弹幕实验。页面包含从左向右滚动的不一大小和颜色的字体，用户可以在底部输入并发送新的弹幕。通过定时器控制弹幕移动，利用JavaScript动态创建和设置节点样式。此外，底部发送区域可上下收起和展开。

摘要由CSDN通过智能技术生成

内容

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

实验原理

利用定时器控制弹幕移动
创建节点实现发送弹幕并为其添加样式
为下端大盒子添加移除class实现收拉

html

<!DOCTYPE html>
<html lang="zh-CN">
<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>demo4</title>
    <link rel="stylesheet" href="./css/demo4.css">
</head>
<body>
    <div id="up">
        <p class="s_f" style="left: -60px;">我爱你</p>
        <p class="s_s" style="left: -48px;">666</p>
        <p class="s_t" style="left: -180px;">zimin</p>
    </div>
    <div class="down">
        <div class="top">
            ↓
        </div>
        <input type="text" name="" class="srk" value="">
        <input type="button" name="" class="sd" value="发送">
    </div>
    <div class="top2">
        ↑
    </div>
    <script src="./js/demo4.js"></script>
</body>
</html>

css

<style>
*{
    margin: 0;
    padding: 0;
}
#up{
    background-color: gray;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
#up>.s_f{
    color: pink;
    font-size: 20px;
    white-space: nowrap;
    position: absolute;
    top: 20px;
}
#up>.s_s{
    color: white;
    font-size: 16px;
    white-space: nowrap;
    position: absolute;
    top: 50px;
}
#up>.s_t{
    color: orange;
    font-size: 36px;
    white-space: nowrap;
    position: absolute;
    top: 66px;
}
.down{
    width: 100%;
    height: 200px;
    background-color: red;
    position: fixed;
    bottom: 0;
    text-align: center;
    line-height: 200px;
}
.down2{
    height: 0;
    overflow: hidden;
}
.down>.top{
    width: 50px;
    height: 20px;
    background-color: yellow;
    line-height: 20px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    left: 48.2%;
}
.top2{
    width: 50px;
    height: 20px;
    background-color: yellow;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 48.2%;
    z-index: -1;
}
.down>.srk{
    width: 200px;
    height: 40px;
}
.down>.sd{
    width: 50px;
    height: 50px;
}
</style>

js

<script>
//顶部弹幕
//弹幕移动
function move(){
    //获取每个弹幕
    var tt=document.getElementsByTagName("p");
    for(var i=0;i<tt.length;i++){
        //获取开始值
        var lt=tt[i].style.left;
        //设置偏移值
        tt[i].style.left=`${parseInt(lt)+2}px`;
        //弹幕回头
        if(parseInt(tt[i].style.left)>700){
            tt[i].style.left=`${parseInt(lt)-1000}px`;
        }
    }
}
setInterval(move,20)
//底部发送
var osd=document.querySelector(".sd");
osd.onclick=function(){
    var osrk=document.querySelector(".srk");
    //获取输入的值
    var vl=osrk.value;
    //点击发送后，清空内容
    osrk.value="";
    var oup=document.getElementById("up");
    //创建节点
    var dm=document.createElement("p");
    //设置css值
    dm.innerHTML=vl;
    var len=dm.innerHTML.length;
    dm.style.color=`rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`;
    dm.style.fontSize=`${Math.floor(Math.random()*49)+1}px`;
    dm.style.position="absolute";
    dm.style.top=`${Math.floor(Math.random()*501)}px`
    var siz=parseInt(dm.style.fontSize);
    dm.style.left=`-${len*siz}px`;
    dm.style.whiteSpace="nowrap"
    oup.appendChild(dm);
}
//下端可收拉
var otop=document.querySelector(".top");
var otop2=document.querySelector(".top2");
otop.onclick=function(){
    var odown=document.getElementsByClassName("down")[0];
    odown.classList.add("top2");
}
otop2.onclick=function(){
    var odown=document.getElementsByClassName("down")[0];
    odown.classList.remove("top2");
}


</script>