导航首页 »  JavaScript代码  » js实现简易弹幕系统

js实现简易弹幕系统

王朝235网址导航 2021-10-17 52 ℃

本文实例为大家分享了原生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>
<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持王朝235网址导航。

免责声明
文章内容由王朝235网址导航整理发布,仅供学习交流使用,不代表本站的观点和立场,具体内容请自行甄别。
加入好处
简单来说就是可以给您的网站提升权重排名,增加外链和网站流量!如果细分的话那么有如下几个好处!
让您的网站更快、更多地被搜索引擎收录
让您的网站名称的关键词在搜索引擎的搜索结果的第一页甚至第一个
通过本站这个分类目录平台从而给您的网站带来巨大流量
如您网站被搜索引擎屏蔽,王朝235网址导航永久缓存贵站信息,通过这个页面浏览者照样借助王朝235网址导航进入您的网站!
温馨提示:如果贵站想上百度,希望贵站能添加本页面为友情链接,感谢您对本站的支持!
<a href="http://www.wc235.com" target="_blank">王朝235网址导航</a>