js實(shí)現(xiàn)簡易彈幕系統(tǒng)
本文實(shí)例為大家分享了原生js實(shí)現(xiàn)彈幕效果的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)思路
1、先寫好靜態(tài)頁面框架
<div id='father'> <div id="top"> <video src="./video/s10_2020129112346.mp4" controls autoplay muted loop></video> <!-- controls顯示標(biāo)準(zhǔn)的視頻控件 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代碼讓頁面美觀一點(diǎn)
*{ /*頁面初始化*/ 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ù)來方便后面使用。
//隨機(jī)生成一種顏色 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標(biāo)簽中,這里我們要用定位將span放在#top中(子絕父相)
//在<div id='#top'></div>添加span標(biāo)簽 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標(biāo)簽 //通過計(jì)時器來實(shí)現(xiàn)彈幕的移動 let tiem = setInterval(()=>{ right++; span.style.right = right + 'px' if( right > 800){ tops.removeChild(span); //當(dāng)彈幕移動出了視頻時,直接銷毀該元素 clearInterval(tiem); //關(guān)閉計(jì)時器 } },10)//覺得速度太慢可以在這調(diào)整 }
4、封裝好了函數(shù),現(xiàn)在就來調(diào)用
let btn = document.getElementById('btn'); //給按鈕添加點(diǎn)擊事件 btn.onclick = ()=>{ if(txt.value=='') return; //當(dāng)用戶輸入為空時直接返回 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'); //給按鈕添加點(diǎn)擊事件 btn.onclick = ()=>{ if(txt.value=='') return; //當(dāng)用戶輸入為空時直接返回 barrage(); txt.value = ''; //清空input框 } //添加一個鍵盤的監(jiān)聽事件(回車) document.addEventListener('keydown', function (e) { if (e.keyCode == 13) { if(txt.value=='') return; //當(dāng)用戶輸入為空時直接返回 barrage(); txt.value = ''; //清空input框 } }); //隨機(jī)生成一種顏色 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標(biāo)簽 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); //當(dāng)彈幕移動出了視頻時,銷毀該元素 clearInterval(tiem); //關(guān)閉計(jì)時器 } },10)//覺得速度太慢可以在這調(diào)整 } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
silverlight線程與基于事件驅(qū)動javascript引擎(實(shí)現(xiàn)軌跡回放功能)
前一段時間一直在重構(gòu)工作站軌跡回放功能,一開始我覺得很簡單,但是后面引發(fā)了一系列奇怪的問題,讓我很疼,所以不得不寫個總結(jié)加深記憶,2011-08-08JS的Ajax與后端交互數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇JS的Ajax與后端交互數(shù)據(jù)的實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08javascript獲取所有同類checkbox選項(xiàng)(實(shí)例代碼)
javascript獲取所有同類checkbox選項(xiàng)的簡單實(shí)例。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-07-07你不知道的 TypeScript 高級類型(小結(jié))
這篇文章主要介紹了你不知道的 TypeScript 高級類型(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JS圖片延遲加載插件LazyImgv1.0用法分析【附demo源碼下載】
這篇文章主要介紹了JS圖片延遲加載插件LazyImgv1.0用法,結(jié)合實(shí)例形式分析了使用圖片延遲加載插件LazyImgv1.0的注意事項(xiàng)與核心操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-09-09BOM系列第三篇之定時器應(yīng)用(時鐘、倒計(jì)時、秒表和鬧鐘)
這篇文章主要介紹了BOM系列第三篇之定時器應(yīng)用(時鐘、倒計(jì)時、秒表和鬧鐘) 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08