快捷導(dǎo)航

js實現(xiàn)簡易彈幕系統(tǒng)

更新時間：2021年09月10日 16:23:53 作者：熊傲

這篇文章主要為大家詳細介紹了js實現(xiàn)簡易彈幕系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了原生js實現(xiàn)彈幕效果的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)思路

1、先寫好靜態(tài)頁面框架

<div id='father'>
        <div id="top">
            <video src="./video/s10_2020129112346.mp4" controls autoplay muted loop></video>
            <!-- controls顯示標準的視頻控件 autoplay 視頻自動播放（只有設(shè)置了muted屬性才能自動播放）
                 muted靜音播放 loop 循環(huán)播放-->
        </div>
        <div id="bottom">
            <input type="text" id="txt">
            <input type="button" id="btn" value="發(fā)送">
        </div>
</div>

2、給簡單的css代碼讓頁面美觀一點

*{
   /*頁面初始化*/
            margin: 0;
            padding: 0;
        }
        body{
            background-color: burlywood;
        }
        #father{
            width: 800px;
            height: 550px;
            margin: 50px auto;
        }
        #top{
            width: 800px;
            height: 500px;
        }
        video{
            width: 800px;
            height: 500px;
        }
        #bottom{
            width: 800px;
            height: 50px;
            background-color: #000;
            text-align: center;
            line-height: 50px;
        }

這樣一個簡單的靜態(tài)頁面就完成了，剩下的我們就來寫JS代碼。

3、我們先來封裝幾個函數(shù)來方便后面使用。

 //隨機生成一種顏色
 function rgb (){
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        return 'rgb('+r+','+g+','+b+')'
    }
    //生成指定范圍的數(shù)據(jù)整數(shù)
    function stochastic(max,min){
        return Math.floor(Math.random()*(max-min)+min);
    }

我們發(fā)送的彈幕放在span標簽中，這里我們要用定位將span放在#top中（子絕父相）

 //在<div id='#top'></div>添加span標簽
 function barrage(){
       let span = document.createElement("span");
        span.innerHTML = txt.value;
        span.style.color = rgb();   //彈幕顏色
        span.style.fontSize = stochastic(50,12) + 'px';  //字體大小  
        span.style.top = stochastic(420,0) +'px'; //出現(xiàn)位置
        let right = -2000
        span.style.right = right + 'px' //距離右邊的距離
        tops.appendChild(span);   //在<div id='#top'></div>添加span標簽
        //通過計時器來實現(xiàn)彈幕的移動
        let tiem = setInterval(()=>{
            right++;
            span.style.right = right + 'px' 
            if( right > 800){   
                tops.removeChild(span);   //當彈幕移動出了視頻時，直接銷毀該元素
                clearInterval(tiem); //關(guān)閉計時器
            }
        },10)//覺得速度太慢可以在這調(diào)整
  }

4、封裝好了函數(shù)，現(xiàn)在就來調(diào)用

let btn = document.getElementById('btn');
//給按鈕添加點擊事件
    btn.onclick = ()=>{
        if(txt.value=='') return; //當用戶輸入為空時直接返回
        barrage(); 
        txt.value = '';  //清空input框
     }    
     //添加一個鍵盤的監(jiān)聽事件（回車）
    document.addEventListener('keydown', function (e) {
        if (e.keyCode == 13) {
           if(txt.value=='') return;
            barrage();
            txt.value = '';
        }
    });

最后附上全部代碼，希望對你有所幫助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js彈幕效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: burlywood;
        }
        #father{
            width: 800px;
            height: 550px;
            margin: 50px auto;
        }
        #top{
            width: 800px;
            height: 500px;
            position: relative;
            overflow:hidden;   /*溢出隱藏*/
        }
        video{
            width: 800px;
            height: 500px;
            object-fit:fill; /*適應(yīng)指定容器的高度與寬度*/
        }
        #bottom{
            width: 800px;
            height: 50px;
            background-color: #000;
            text-align: center;
            line-height: 50px;
        }
        span{
            position: absolute;
            right: 0;
            top:0;
        }
    </style>
</head>
<body>
    <div id='father'>
        <div id="top">
            <video src="./video/s10_2020129112346.mp4" controls autoplay muted loop></video>
        </div>
        <div id="bottom">
            <input type="text" id="txt">
            <input type="button" id="btn" value="發(fā)送">
        </div>
    </div>
    <script>
        let txt = document.getElementById('txt');
        let btn = document.getElementById('btn');
        let tops = document.getElementById('top');
        //給按鈕添加點擊事件
        btn.onclick = ()=>{
            if(txt.value=='') return;   //當用戶輸入為空時直接返回
            barrage();
            txt.value = '';   //清空input框
        }    
        //添加一個鍵盤的監(jiān)聽事件（回車）
        document.addEventListener('keydown', function (e) {
            if (e.keyCode == 13) {
                if(txt.value=='') return;    //當用戶輸入為空時直接返回
                barrage();
                txt.value = '';    //清空input框
            }
        });
       //隨機生成一種顏色
        function rgb (){
            let r = Math.floor(Math.random() * 256);
            let g = Math.floor(Math.random() * 256);
            let b = Math.floor(Math.random() * 256);
            return 'rgb('+r+','+g+','+b+')'
        }
        //生成指定范圍的數(shù)據(jù)整數(shù)
        function stochastic(max,min){
            return Math.floor(Math.random()*(max-min)+min);
        }
        //在<div id='#top'></div>添加span標簽
        function barrage(){
            let span = document.createElement("span");
            span.innerHTML = txt.value;
            span.style.color = rgb();
            span.style.fontSize = stochastic(50,12) + 'px';
            span.style.top = stochastic(420,0) +'px';
            span.style.right = -200 + 'px';
            tops.appendChild(span);
            let right = -200;
            let tiem = setInterval(()=>{
                right++;
                span.style.right = right + 'px' 
                if( right > 800){
                    tops.removeChild(span);  //當彈幕移動出了視頻時，銷毀該元素
                    clearInterval(tiem);   //關(guān)閉計時器
                }
            },10)//覺得速度太慢可以在這調(diào)整
        }
    </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: