用原生js+HTML+CSS实现一个弹幕的效果

最新推荐文章于 2025-06-14 11:10:37 发布

weixin_34367845

最新推荐文章于 2025-06-14 11:10:37 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/3728554/blog/1593337

本文介绍了一个简单的自制弹幕系统的实现过程，包括HTML布局、CSS样式和JavaScript交互逻辑。重点讲解了如何通过动态创建元素实现弹幕效果，并分享了一些实用的前端开发技巧。

2019独角兽企业重金招聘Python工程师标准>>>

废话不多说，先上代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="yangshi.css" type="text/css" />
    <script src="newindex.js"></script>
    <title>弹幕</title>
</head>
<body>
<div id="main">
    <div id="mainScreen">
    </div>
    <div id="bottom">
         <input id="txt" type="text" value="say some thing..." />
         <input id="btn" type="button" value="Send" />
    </div>
</div>
</body>
</html>

*{
    margin: 0;
    padding: 0;

}
html,body{
    /* 自适应高度 */
    width: 100%;
    height: 100%;
}
#main{
    width: 100%;
    height: 100%;
    /*背景色线性变化*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#ADD8E6), to(#f6f6f8));
    overflow: hidden;
}
span{
    /*强制不换行*/
    white-space: nowrap;
    position:absolute;
}
#mainScreen{
    width: 800px;
    height: 600px;
    margin: 8px auto;
    border: 1px solid gray;
    background-color: white;
    /*隐藏span标签超出oScreen屏幕范围的内容*/
    overflow: hidden;
    position: relative;
}
#bottom{
    width: 800px;
    height: 32px;
    margin: 5px auto;
}
#txt{
    width: 240px;
    height: 30px;
    line-height: 30px;
    font-family: 微软雅黑;
    padding-left: 8px;
    border: 1px solid lightslategrey;
    float: left;
}
#btn{
    width: 60px;
    height: 30px;
    line-height: 30px;
    margin-left: 30px;
    margin-top: 2px;
    border-radius: 4px;
    float: left;
    }

window.onload = function(){
    var oBtn = document.getElementById("btn");
    var oText = document.getElementById("txt");
    var oScreen = document.getElementById("mainScreen");
    oBtn.onclick = sendMessage;
    // 每次点击清空输入框
    oText.onclick = function(){
        oText.value = "";
    };
    //添加回车提交事件
    document.onkeydown = function(evt){
        var event = evt || window.event;//兼容IE
        if(event.keyCode == 13){
            sendMessage();
        }
    };

    function sendMessage(){
        //如果输入为空则弹出对话框
        if(oText.value.trim() == ""){
            alert("请正确输入");
        }
        else{
        //如果有输入则动态创建span并将内容添加到span中，然后再将span添加到mainScreen中
            var oDan1 = document.createElement("span");
            oDan1.innerText = oText.value;
            
            // 定义随机字体大小
            var oFontSize  = parseInt(Math.random()*16+16);
            // 创建随机颜色
            var oFontColor =  '#'+Math.floor(Math.random()*16777215).toString(16);
            // 随机高度
            var oMax = oScreen.offsetHeight - oFontSize;
            var oMin = oScreen.offsetTop;
            var oHeight = Math.floor(Math.random() * (oMax-oMin) + oMin);

            oDan1.style.color = oFontColor;
            oDan1.style.fontSize = oFontSize + "px";
            oDan1.style.marginTop = oHeight + "px";

            // Move
            var variable = 800; //800是mainScreen的宽度，也可写成：oDan1.offsetLeft
             var timer = setInterval(function () {
                oDan1.style.marginLeft = variable + "px";
            //如果没有超出边界就将span动态添加到oScreen
                if (variable > -oDan1.offsetWidth){
                    variable-=2;
                    oScreen.appendChild(oDan1);
                }
                else {
                    clearInterval(timer);
                    // 当显示超出范围就删除节点，这里我之前用display:none不管用
                    oDan1.parentNode.removeChild(oDan1);
                }
            }, 1);
        }
    }
}

知识点汇总：

里面用到了许多我不太用的方法，在这里列举几个

1）背景色渐变是个好方法，应该多用，设计一个美观的背景色很重要。比直接给背景添加图片要执行的快，如果有多个页面，且每个页面都有背景图片，将其改为背景渐变色能够提升运行速度；

background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#ADD8E6), to(#f6f6f8));

2）强制不换行；

white-space: nowrap;

3）千万不要用设置边距或者定位等方法居中外部元素，如主div等，会导致更换浏览器百分比显示或者不同大小浏览器显示时候出现错误；

4）之所以如下调用函数是因为要么写一个函数，将这个函数包进去调用，要么就不要加后面的括号，就会自动执行；

oBtn.onclick = sendMessage;

5）按钮绑定函数；

document.onkeydown = function(evt){
    var event = evt || window.event;//兼容IE
    if(event.keyCode == 13){
        //监听回车事件
        sendMessage();
    }
};

6）区分innerHTML和innerText的区别；

7）随机数创建以及随机为元素添加随机属性；

var oFontSize  = parseInt(Math.random()*16+16);

oDan1.style.fontSize = oFontSize + "px";

8）下面的执行语句应添加到setInterval内部因为他的marginLeft的值是在该函数内部实现的，如果两个没有放到一起，会导致，先将span插入到mainScreen中，然后执行setInterval时才将边距设置到右边。

也就是会使得点击按钮后，你的视频框内先会闪出提交的内容，然后立马从右边再移动到左边；

oScreen.appendChild(oDan1);

9）删除节点而不是display：none；

oDan1.parentNode.removeChild(oDan1);

10）在元素移出屏幕后，应先清除定时器，然后再移除元素，要不然多次点击弹幕会导致报错，报错就是因为定时器没有清除掉重复执行却没有可以删除的元素；

以上就是这次小项目的心得，中间出了很多大大小小的问题，都靠自己以及网络解决了，第一次完全自己动手实现，没有参考别人代码，有点小激动。

转载于:https://my.oschina.net/u/3728554/blog/1593337