本篇內容介紹了“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>“js怎么實現簡易的彈幕系統”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
