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 = -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 = '';
        }
    });

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

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