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

时间 2019-11-12

标签原生 js+html+css html css 实现一个效果栏目 JavaScript 繁體版

原文原文链接

废话很少说，先上代码：css

<!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);
        }
    }
}

知识点汇总：html

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

1）背景色渐变是个好方法，应该多用，设计一个美观的背景色很重要。比直接给背景添加图片要执行的快，若是有多个页面，且每一个页面都有背景图片，将其改成背景渐变色可以提高运行速度；浏览器

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

2）强制不换行；网络

white-space: nowrap;

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

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

oBtn.onclick = sendMessage;

5）按钮绑定函数；函数

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

6）区分innerHTML和innerText的区别；字体

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

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）在元素移出屏幕后，应先清除定时器，而后再移除元素，要否则屡次点击弹幕会致使报错，报错就是由于定时器没有清除掉重复执行却没有能够删除的元素；

以上就是此次小项目的心得，中间出了不少大大小小的问题，都靠本身以及网络解决了，第一次彻底本身动手实现，没有参考别人代码，有点小激动。