1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>Js原生弹幕</title>
  7.     <link rel="stylesheet" href="">
  8.     <style type="text/css" media="screen">
  9.         * {
  10.             margin: 0px;
  11.             padding: 0px
  12.         }
  13.  
  14.         html, body {
  15.             height: 100%
  16.         }
  17.  
  18.         body {
  19.             overflow: hidden;
  20.             background-color: #FFF;
  21.             text-align: center;
  22.         }
  23.  
  24.         .flex-column {
  25.             display: flex;
  26.             flex-direction: column;
  27.             justify-content: space-between;, align-items: center;
  28.         }
  29.  
  30.         .flex-row {
  31.             display: flex;
  32.             flex-direction: row;
  33.             justify-content: center;
  34.             align-items: center;
  35.         }
  36.  
  37.         .wrap {
  38.             overflow: hidden;
  39.             width: 70%;
  40.             height: 600px;
  41.             margin: 100px auto;
  42.             padding: 20px;
  43.             background-color: transparent;
  44.             box-shadow: 0 0 9px #222;
  45.             border-radius: 20px;
  46.         }
  47.  
  48.         .wrap .box {
  49.             position: relative;
  50.             width: 100%;
  51.             height: 90%;
  52.             background-color: #000000;
  53.             border-radius: 10px
  54.         }
  55.  
  56.         .wrap .box span {
  57.             position: absolute;
  58.             top: 10px;
  59.             left: 20px;
  60.             display: block;
  61.             padding: 10px;
  62.             color: #336688
  63.         }
  64.  
  65.         .wrap .send {
  66.             display: flex;
  67.             width: 100%;
  68.             height: 10%;
  69.             background-color: #000000;
  70.             border-radius: 8px
  71.         }
  72.  
  73.         .wrap .send input {
  74.             width: 40%;
  75.             height: 60%;
  76.             border: 0;
  77.             outline: 0;
  78.             border-radius: 5px 0px 0px 5px;
  79.             box-shadow: 0px 0px 5px #d9d9d9;
  80.             text-indent: 1em
  81.         }
  82.  
  83.         .wrap .send .send-btn {
  84.             width: 100px;
  85.             height: 60%;
  86.             background-color: #fe943b;
  87.             color: #FFF;
  88.             text-align: center;
  89.             border-radius: 0px 5px 5px 0px;
  90.             line-height: 30px;
  91.             cursor: pointer;
  92.         }
  93.  
  94.         .wrap .send .send-btn:hover {
  95.             background-color: #4cacdc
  96.         }
  97.     </style>
  98. </head>
  99. <body>
  100. <div class="wrap flex-column">
  101.     <div class="box">
  102.         <video src="danmu.mp4" width="100%" height="100%" controls autoplay></video>
  103.     </div>
  104.     <div class="send flex-row">
  105.         <input type="text" class="con" placeholder="弹幕发送[]~(^v^)~*">
  106.         <div class="send-btn">发送</div>
  107.     </div>
  108. </div>
  109. <!-- javascript 前端中能做什么
  110.     1.响应用户的操作 事件（键盘事件、鼠标事件）
  111.     2.操作dom元素（增删改查、属性操作、样式等）
  112.     3.数据交互 表单验证 ajax json jsonp 正则表达式
  113.     4.造轮子 mvvm mvc nodeJS jquery
  114.  -->
  115. <!-- 需求分析
  116.    用户点击发送按钮 把input的内容展示到box里面
  117.    1.元素 .con .send-btn .box span（创建）
  118.    2.事件：点击事件 键盘事件
  119.    3.行为
  120.        1.点击.send-btn获取.con的内容
  121.            (1)规范发送信息
  122.            (2)禁止空及全空格
  123.            (3)存储value值
  124.        2.根据内容动态生成span标签
  125.            (1)创建节点document.createElement
  126.            (2)改变节点内容innerHTML
  127.            (3)节点 生成初始化位置等
  128.            (4)标签添加到oBox appendChild
  129.        3.message运动
  130.            (1)改变元素的left值
  131.            (2)定时器改变 setInterval
  132.            (3)this代表当前弹幕
  133.            (4)弹幕left = 当前left-1
  134.        4.随机函数
  135.            Math.random 0-1 包括0但不包括1
  136.            (1)top
  137.            (2)color
  138.            (3)fontsize
  139.            (4)textShadow
  140.            (5)timing运动曲线
  141.                linear
  142.                ease-out
  143.        5.业务完善
  144.            (1)过去的删除掉
  145.                停止计时器
  146.                删除自身
  147.                终止函数
  148.            (2)完善回车输入
  149.                在oCon上回车 发送弹幕
  150.  -->
  151. <script src="jquery.min.js" type="text/javascript"></script>
  152. <script>
  153.     //1.获取元素
  154.     var oBox = document.querySelector('.box');   //获取.box元素
  155.     var oCon = document.querySelector('.con');   //获取input框
  156.     var oBtn = document.querySelector('.send-btn');   //获取发送按钮
  157.     var cW = oBox.offsetWidth;   //获取box的宽度
  158.     var cH = oBox.offsetHeight;   //获取box的高度
  159.     var message = '';   //弹幕内容初始化
  160.     oBtn.onclick = send;   //点击发送
  161.     oCon.onkeydown = function (e) {
  162.         e = e || window.event;
  163.         if (e.keyCode === 13) {
  164.             //回车键
  165.             send();
  166.         }
  167.     };
  168.     function send() {
  169.         //获取oCon的内容
  170.         if (oCon.value.length <= 0 || (/^\s+$/).test(oCon.value)) {
  171.             alert('请输入弹幕');
  172.             return false;
  173.         }
  174.         message = oCon.value;
  175.         console.log(message);
  176.         //生成标签
  177.         createEle(message);   //执行节点创建模块
  178.         oCon.value = '';   //收尾工作清空输入框
  179.     }
  180.     function createEle(txt) {
  181.         //动态生成span标签
  182.         var oMessage = document.createElement('span');   //创建标签
  183.         oMessage.innerHTML = txt;   //接收参数txt并且生成替换内容
  184.         oMessage.style.left = cW + 'px';  //初始化生成位置x
  185.         oBox.appendChild(oMessage);   //把标签塞到oBox里面
  186.         roll.call(oMessage, {
  187.             //call改变函数内部this的指向
  188.             timing: ['linear', 'ease-out'][~~(Math.random() * 2)],
  189.             color: '#' + (~~(Math.random() * (1 << 24))).toString(16),
  190.             top: random(0, cH),
  191.             fontSize: random(16, 32)
  192.         });
  193.     }
  194.     function roll(opt) {
  195.         //弹幕滚动
  196.         //如果对象中不存在timing 初始化
  197.         opt.timing = opt.timing || 'linear';
  198.         opt.color = opt.color || '#fff';
  199.         opt.top = opt.top || 0;
  200.         opt.fontSize = opt.fontSize || 16;
  201.         this._left = parseInt(this.offsetLeft);   //获取当前left的值
  202.         this.style.color = opt.color;   //初始化颜色
  203.         this.style.top = opt.top + 'px';
  204.         this.style.fontSize = opt.fontSize + 'px';
  205.         this.timer = setInterval(function () {
  206.             if (this._left <= 100) {
  207.                 clearInterval(this.timer);   //终止定时器
  208.                 this.parentNode.removeChild(this);
  209.                 return;   //终止函数
  210.             }
  211.             switch (opt.timing) {
  212.                 case 'linear':   //如果匀速
  213.                     this._left += -2;
  214.                     break;
  215.                 case 'ease-out':   //
  216.                     this._left += (0 - this._left) * .01;
  217.                     break;
  218.             }
  219.             this.style.left = this._left + 'px';
  220.         }.bind(this), 1000 / 60);
  221.     }
  222.     function random(start, end) {
  223.         //随机数封装
  224.         return start + ~~(Math.random() * (end - start));
  225.     }
  226.     var aLi = document.querySelectorAll('li');   //10
  227.  
  228.     function forEach(ele, cb) {
  229.         for (var i = 0, len = aLi.length; i < len; i++) {
  230.             cb && cb(ele[i], i);
  231.         }
  232.     }
  233.     forEach(aLi, function (ele, i) {
  234.         ele.style.left = i * 100 + 'px';
  235.     });
  236.     //产生闭包
  237.     var obj = {
  238.         num: 1,
  239.         add: function () {
  240.             this.num++;   //obj.num = 2;
  241.             (function () {
  242.                 console.log(this.num);
  243.             })
  244.         }
  245.     };
  246.     obj.add();  //window
  247. </script>
  248. </body>
  249. </html>

JS原生实现视频弹幕Demo（仿）的更多相关文章

  1. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  2. Canvas + WebSocket + Redis 实现一个视频弹幕

    原文出自:https://www.pandashen.com 页面布局 首先,我们需要实现页面布局,在根目录创建 index.html 布局中我们需要有一个 video 多媒体标签引入我们的本地视频, ...

  3. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  4. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  5. js原生回到顶部

    <!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...

  6. JS原生Date类型方法的一些冷知识

    ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...

  7. 使用jQuery.makeArray() 将多种类型转换成JS原生Array

    jQuery.makeArray(obj)这个函数从名字上来看非常easy猜出它的用途:应该是用来将传入的对象转换成一个原生array 再看看官网上对它的解释:Convert an array-lik ...

  8. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  9. js原生高逼格插件

    如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...

随机推荐

  1. 大数据系列博客之 --- 深入简出 Shell 脚本语言（提升篇）

    首先声明,此系列shell系列博客分为四篇发布,分别是: 基础篇:https://www.cnblogs.com/lsy131479/p/9914747.html 提升篇:https://www.cn ...

  2. 基于zepto的移动端轻量级日期插件

    前言 做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的 ...

  3. OpenStack容器网络项目Kuryr（libnetwork）

    转:https://www.aliyun.com/jiaocheng/518375.html 摘要:容器近几年非常流行,有很多项目都考虑将容器与SDN结合.Kuryr就是其中一个项目.Kuryr项目在 ...

  4. ECS——CentOS7下使用yum安装MariaDB

    CentOS 6 或早期的版本中提供的是 MySQL 的服务器/客户端安装包,但 CentOS 7 已使用了 MariaDB 替代了默认的 MySQL.MariaDB数据库管理系统是MySQL的一个分 ...

  5. 牛客网NOIP赛前集训营-提高组（第四场）游记

    牛客网NOIP赛前集训营-提高组(第四场)游记 动态点分治 题目大意: \(T(t\le10000)\)组询问,求\([l,r]\)中\(k(l,r,k<2^{63})\)的非负整数次幂的数的个 ...

  6. Android日志工具的使用

    一.使用Android的日志工具Log 1.Android中的日志工具类是Log,这个类中提供了如下5个方法来供我们打印日志. log.v():用于打印哪些最为繁琐.意义最小的日志信息.对应级别ver ...

  7. APP支付宝支付接入

    1.app支付简介 买家可以在手机,掌上电脑等无线设备的应用程序内,通过支付宝(支付宝app或网页版支付宝)付款购买商品,且资金实行实时到账. 2.申请条件 1.申请前必须拥有经过实名认证的支付宝账户 ...

  8. PHP 实现 word/excel/ppt 转换为 PDF

    前段时间负责公司内部文件平台的设计,其中有一个需求是要能够在线浏览用户上传的 office 文件. 我的思路是先将 office 转换成 PDF,再通过 pdf.js 插件解析 PDF 文件,使其能在 ...

  9. 【面试 redis】【第十二篇】redis的相关面试问题

    redis的相关面试问题 redis教程:http://www.redis.net.cn/tutorial/3501.html ==================================== ...

  10. 在DevExpress程序中使用内置的图标构建美观的界面元素【转】

    https://www.cnblogs.com/wuhuacong/p/6217012.html 在我们一般的程序中,为一般的界面元素添加一定的图标展示,有助于提升界面的整体的美观.结合排版布局,以及 ...