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[xss_clean] = 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);   //在
添加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 = '';        }    });

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

"js怎么实现简易的弹幕系统"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！