js实现简易弹幕系统

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

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

时间: 2021-09-10

原生js实现弹幕效果

本文实例为大家分享了js实现弹幕效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>原生js实现弹幕效果</title> <style> * { padding:0; margin:0; } .all { width:600px; height:400px; backgr

基于JavaScript实现弹幕特效

本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下 此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教. 注意用的是jquery-2.0.3.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css&

js cavans实现静态滚动弹幕

本文实例为大家分享了js实现静态滚动弹幕的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 弹幕文字 --> <div class="video-

javascript实现视频弹幕效果(两个版本)

本文实例为大家分享了javascript实现视频弹幕效果的具体代码,供大家参考,具体内容如下 基础版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; height: 600px; background-color:

javascript实现弹幕墙效果

刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙. 步骤如下: 1.编写HTML代码: 创建一个弹幕显示墙,以及两个按钮,分别为"发送"和"清屏",并在文本框中设置placeholder为"说点什么吧?"以提示用户在此输入弹幕信息. <body> <div class="con"> <div id="screen"> <div class=

js实现弹幕飞机效果

本文实例为大家分享了js实现弹幕飞机效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ width: 70vw;/*长宽最好是obj的倍数*/ height: 90vh; border-width:

原生JS实现弹幕效果的简单操作指南

前言 现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果,那么如何用JS实现这样的效果呢,用一个初学者的方法记录下这个方法,欢迎大牛指导. 1.首先需要操作文档必须拿到Dom中的元素,当然有很多方法,这里还是用document.querySelector. 2.这边也是为了键盘和鼠标都可发送封装了一个函数function sendMsg(){ 首先需要创建一个容器来接受你编辑的内容,这里用span标签,当然其他标签也可 var oSpan=document.cerateElement

简单实现JavaScript弹幕效果

不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非常简单啦. 就是由一个div.一个input框另加一个button组成. <div id="box" class="box"></div> <input type="text" id="txt" /&

JavaScript直播评论发弹幕切图功能点集合效果代码

一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl

JS实现的视频弹幕效果示例

本文实例讲述了JS实现的视频弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>斗鱼

jquery实现直播视频弹幕效果

JQ实现弹幕效果,快来吐糟你的想法吧 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQ实现弹幕效果</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ height:700px; width:1000

JS+DIV实现的卷帘效果示例

本文实例讲述了JS+DIV实现的卷帘效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JS+DIV卷帘效果示例-F-BLOG</title> <meta http-equiv="Content-Type" content=&qu

JS实现的缓冲运动效果示例

本文实例讲述了JS实现的缓冲运动效果.分享给大家供大家参考,具体如下: 缓冲需要用到数值取整,向上取整:Math.ceil()  向下取整Math.floor() 移动的速度慢慢减慢的效果,移动速度=(终点位置 - 当前位置) / 一个数 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

JS实现的自动打字效果示例

本文实例讲述了JS实现的自动打字效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing</title> </head> <body> <div id='divTyping'></div> <script> var str = 'js 实现的 打字效果,感

JS实现图片翻书效果示例代码

picture.html 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS实现图片翻书效果</title> <META http-equiv=imag

JS简单实现浮动窗口效果示例

本文实例讲述了JS简单实现浮动窗口效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

JS实现的简易拖放效果示例

本文实例讲述了JS实现的简易拖放效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

Android编程实现简易弹幕效果示例【附demo源码下载】

本文实例讲述了Android编程实现简易弹幕效果.分享给大家供大家参考,具体如下: 首先上效果图,类似于360检测到骚扰电话页面: 布局很简单,上面是一个RelativeLayout,下面一个Button. 功能: (1)弹幕生成后自动从右侧往左侧滚动(TranslateAnimation),弹幕消失后立刻被移除. (2)弹幕位置随机出现,并且不重复(防止文字重叠). (3)字体大小在一定范围内随机改变,字体颜色也可以设置. (4)自定义先减速,后加速的Interpolator,弹幕加速进入.减