| 本文实例为大家分享了原生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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
用js编写简单的贪吃蛇小游戏
vue 处理跨域问题及解决方法小结 |
