js實現簡易彈幕系統
本文實例為大傢分享瞭原生js實現彈幕效果的具體代碼,供大傢參考,具體內容如下
實現思路
1、先寫好靜態頁面框架
<div id='father'> <div id="top"> <video src="./video/s10_2020129112346.mp4" controls autoplay muted loop></video> <!-- controls顯示標準的視頻控件 autoplay 視頻自動播放(隻有設置瞭muted屬性才能自動播放) muted靜音播放 loop 循環播放--> </div> <div id="bottom"> <input type="text" id="txt"> <input type="button" id="btn" value="發送"> </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; }
這樣一個簡單的靜態頁面就完成瞭,剩下的我們就來寫JS代碼。
3、我們先來封裝幾個函數來方便後面使用。
//隨機生成一種顏色 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+')' } //生成指定范圍的數據整數 function stochastic(max,min){ return Math.floor(Math.random()*(max-min)+min); }
我們發送的彈幕放在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'; //出現位置 let right = -2000 span.style.right = right + 'px' //距離右邊的距離 tops.appendChild(span); //在<div id='#top'></div>添加span標簽 //通過計時器來實現彈幕的移動 let tiem = setInterval(()=>{ right++; span.style.right = right + 'px' if( right > 800){ tops.removeChild(span); //當彈幕移動出瞭視頻時,直接銷毀該元素 clearInterval(tiem); //關閉計時器 } },10)//覺得速度太慢可以在這調整 }
4、封裝好瞭函數,現在就來調用
let btn = document.getElementById('btn'); //給按鈕添加點擊事件 btn.onclick = ()=>{ if(txt.value=='') return; //當用戶輸入為空時直接返回 barrage(); txt.value = ''; //清空input框 } //添加一個鍵盤的監聽事件(回車) 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; /*適應指定容器的高度與寬度*/ } #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="發送"> </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框 } //添加一個鍵盤的監聽事件(回車) 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+')' } //生成指定范圍的數據整數 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); //關閉計時器 } },10)//覺得速度太慢可以在這調整 } </script> </body> </html>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- javascript實現點擊產生隨機圖形
- JavaScript css3實現簡單視頻彈幕功能
- JavaScript實現抽獎器效果
- 使用js實現動態背景
- js實現七夕表白彈幕效果 jQuery實現彈幕技術