用原生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）在元素移出屏幕後，應先清除定時器，而後再移除元素，要否則屢次點擊彈幕會致使報錯，報錯就是由於定時器沒有清除掉重複執行卻沒有能夠刪除的元素；

以上就是此次小項目的心得，中間出了不少大大小小的問題，都靠本身以及網絡解決了，第一次徹底本身動手實現，沒有參考別人代碼，有點小激動。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。