本篇内容介绍了“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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
