js實(shí)現(xiàn)簡易彈幕系統(tǒng)
更新時間：2021年09月10日 16:23:53 作者：熊傲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡易彈幕系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(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-08
JS的Ajax與后端交互數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇JS的Ajax與后端交互數(shù)據(jù)的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
javascript獲取所有同類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
這篇文章主要介紹了JavaScript淡入淡出漸變實(shí)現(xiàn)方法,涉及javascript頁面元素樣式的漸變操作技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08
你不知道的 TypeScript 高級類型(小結(jié))
這篇文章主要介紹了你不知道的 TypeScript 高級類型(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
本文主要分享了原生js實(shí)現(xiàn)商品放大鏡效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
JS圖片延遲加載插件LazyImgv1.0用法分析【附demo源碼下載】
這篇文章主要介紹了JS圖片延遲加載插件LazyImgv1.0用法,結(jié)合實(shí)例形式分析了使用圖片延遲加載插件LazyImgv1.0的注意事項(xiàng)與核心操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-09-09
BOM系列第三篇之定時器應(yīng)用(時鐘、倒計(jì)時、秒表和鬧鐘)
這篇文章主要介紹了BOM系列第三篇之定時器應(yīng)用(時鐘、倒計(jì)時、秒表和鬧鐘) 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了JS+JQuery實(shí)現(xiàn)無縫連接輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12