js实现简易弹幕系统 js实现简易弹幕系统

本文实例为大家分享了原生js实现弹幕效果的具体代码，供大家参考，具体内容如下
实现思路 【js实现简易弹幕系统】1、先写好静态页面框架

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中（子绝父相）

//在添加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 = -2000span.style.right = right + 'px' //距离右边的距离tops.appendChild(span); //在添加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.valuehttps://www.it610.com/article/=='') return; //当用户输入为空时直接返回barrage(); txt.valuehttps://www.it610.com/article/= ''; //清空input框}//添加一个键盘的监听事件（回车）document.addEventListener('keydown', function (e) {if (e.keyCode == 13) {if(txt.valuehttps://www.it610.com/article/=='') return; barrage(); txt.valuehttps://www.it610.com/article/= ''; }});

最后附上全部代码，希望对你有所帮助

js弹幕效果 - 锐客网*{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; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。