<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Js原生弹幕</title>

    <link rel="stylesheet" href="">

    <style type="text/css" media="screen">

        * {

            margin: 0px;

            padding: 0px

        }

        html, body {

            height: 100%

        }

        body {

            overflow: hidden;

            background-color: #FFF;

            text-align: center;

        }

        .flex-column {

            display: flex;

            flex-direction: column;

            justify-content: space-between;, align-items: center;

        }

        .flex-row {

            display: flex;

            flex-direction: row;

            justify-content: center;

            align-items: center;

        }

        .wrap {

            overflow: hidden;

            width: 70%;

            height: 600px;

            margin: 100px auto;

            padding: 20px;

            background-color: transparent;

            box-shadow: 0 0 9px #222;

            border-radius: 20px;

        }

        .wrap .box {

            position: relative;

            width: 100%;

            height: 90%;

            background-color: #000000;

            border-radius: 10px

        }

        .wrap .box span {

            position: absolute;

            top: 10px;

            left: 20px;

            display: block;

            padding: 10px;

            color: #336688

        }

        .wrap .send {

            display: flex;

            width: 100%;

            height: 10%;

            background-color: #000000;

            border-radius: 8px

        }

        .wrap .send input {

            width: 40%;

            height: 60%;

            border: 0;

            outline: 0;

            border-radius: 5px 0px 0px 5px;

            box-shadow: 0px 0px 5px #d9d9d9;

            text-indent: 1em

        }

        .wrap .send .send-btn {

            width: 100px;

            height: 60%;

            background-color: #fe943b;

            color: #FFF;

            text-align: center;

            border-radius: 0px 5px 5px 0px;

            line-height: 30px;

            cursor: pointer;

        }

        .wrap .send .send-btn:hover {

            background-color: #4cacdc

        }

    </style>

</head>

<body>

<div class="wrap flex-column">

    <div class="box">

        <video src="danmu.mp4" width="100%" height="100%" controls autoplay></video>

    </div>

    <div class="send flex-row">

        <input type="text" class="con" placeholder="弹幕发送[]~(^v^)~*">

        <div class="send-btn">发送</div>

    </div>

</div>

<!-- javascript 前端中能做什么

    1.响应用户的操作 事件（键盘事件、鼠标事件）

    2.操作dom元素（增删改查、属性操作、样式等）

    3.数据交互 表单验证 ajax json jsonp 正则表达式

    4.造轮子 mvvm mvc nodeJS jquery

 -->

<!-- 需求分析

   用户点击发送按钮 把input的内容展示到box里面

   1.元素 .con .send-btn .box span（创建）

   2.事件：点击事件 键盘事件

   3.行为

       1.点击.send-btn获取.con的内容

           (1)规范发送信息

           (2)禁止空及全空格

           (3)存储value值

       2.根据内容动态生成span标签

           (1)创建节点document.createElement

           (2)改变节点内容innerHTML

           (3)节点 生成初始化位置等

           (4)标签添加到oBox appendChild

       3.message运动

           (1)改变元素的left值

           (2)定时器改变 setInterval

           (3)this代表当前弹幕

           (4)弹幕left = 当前left-1

       4.随机函数

           Math.random 0-1 包括0但不包括1

           (1)top

           (2)color

           (3)fontsize

           (4)textShadow

           (5)timing运动曲线

               linear

               ease-out

       5.业务完善

           (1)过去的删除掉

               停止计时器

               删除自身

               终止函数

           (2)完善回车输入

               在oCon上回车 发送弹幕

 -->

<script src="jquery.min.js" type="text/javascript"></script>

<script>

    //1.获取元素

    var oBox = document.querySelector('.box');   //获取.box元素

    var oCon = document.querySelector('.con');   //获取input框

    var oBtn = document.querySelector('.send-btn');   //获取发送按钮

    var cW = oBox.offsetWidth;   //获取box的宽度

    var cH = oBox.offsetHeight;   //获取box的高度

    var message = '';   //弹幕内容初始化

    oBtn.onclick = send;   //点击发送

    oCon.onkeydown = function (e) {

        e = e || window.event;

        if (e.keyCode === 13) {

            //回车键

            send();

        }

    };

    function send() {

        //获取oCon的内容

        if (oCon.value.length <= 0 || (/^\s+$/).test(oCon.value)) {

            alert('请输入弹幕');

            return false;

        }

        message = oCon.value;

        console.log(message);

        //生成标签

        createEle(message);   //执行节点创建模块

        oCon.value = '';   //收尾工作清空输入框

    }

    function createEle(txt) {

        //动态生成span标签

        var oMessage = document.createElement('span');   //创建标签

        oMessage.innerHTML = txt;   //接收参数txt并且生成替换内容

        oMessage.style.left = cW + 'px';  //初始化生成位置x

        oBox.appendChild(oMessage);   //把标签塞到oBox里面

        roll.call(oMessage, {

            //call改变函数内部this的指向

            timing: ['linear', 'ease-out'][~~(Math.random() * 2)],

            color: '#' + (~~(Math.random() * (1 << 24))).toString(16),

            top: random(0, cH),

            fontSize: random(16, 32)

        });

    }

    function roll(opt) {

        //弹幕滚动

        //如果对象中不存在timing 初始化

        opt.timing = opt.timing || 'linear';

        opt.color = opt.color || '#fff';

        opt.top = opt.top || 0;

        opt.fontSize = opt.fontSize || 16;

        this._left = parseInt(this.offsetLeft);   //获取当前left的值

        this.style.color = opt.color;   //初始化颜色

        this.style.top = opt.top + 'px';

        this.style.fontSize = opt.fontSize + 'px';

        this.timer = setInterval(function () {

            if (this._left <= 100) {

                clearInterval(this.timer);   //终止定时器

                this.parentNode.removeChild(this);

                return;   //终止函数

            }

            switch (opt.timing) {

                case 'linear':   //如果匀速

                    this._left += -2;

                    break;

                case 'ease-out':   //

                    this._left += (0 - this._left) * .01;

                    break;

            }

            this.style.left = this._left + 'px';

        }.bind(this), 1000 / 60);

    }

    function random(start, end) {

        //随机数封装

        return start + ~~(Math.random() * (end - start));

    }

    var aLi = document.querySelectorAll('li');   //10

    function forEach(ele, cb) {

        for (var i = 0, len = aLi.length; i < len; i++) {

            cb && cb(ele[i], i);

        }

    }

    forEach(aLi, function (ele, i) {

        ele.style.left = i * 100 + 'px';

    });

    //产生闭包

    var obj = {

        num: 1,

        add: function () {

            this.num++;   //obj.num = 2;

            (function () {

                console.log(this.num);

            })

        }

    };

    obj.add();  //window

</script>

</body>

</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. IdentityServer4-主题

    一.Startup 二.定义Resources 三.定义Clients 四.登录 五.使用外部身份提供商登录 六.Windows身份验证 七.登出 八.注销外部身份提供商 九.联合注销 十.联合网关 ...

  2. loj#2552. 「CTSC2018」假面

    题目链接 loj#2552. 「CTSC2018」假面 题解 本题严谨的证明了我菜的本质 对于砍人的操作好做找龙哥就好了,blood很少,每次暴力维护一下 对于操作1 设\(a_i\)为第i个人存活的 ...

  3. Codeforces.842D.Vitya and Strange Lesson(Trie xor)

    题目链接 /* 异或只有两种情况,可以将序列放到01Tire树上做 在不异或的情况下在Tire上查找序列的mex很容易,从高位到低位 如果0位置上数没有满,则向0递归:否则向1 (0位置上的数都满了 ...

  4. 用面向对象计算BMI指数

    from __future__ import division class Student: def __init__(self,name,weight,height): self.name=name ...

  5. import pandas as pd Python安装pandas模块

    在学习python过程中需要用到一个叫pandas的模块,在pycharm中安装时总是出错. 千般百度折腾还是无果,后来发现它需要安装很多依赖包.就问你气不气~ 需要手动安装啊,千万记住,这里有个py ...

  6. 440P 测试三星ssd840pro 512g

    下面是鲁大师的截屏 安装win8.1 x64颇费周折,计算机->管理模糊,解决方法 现在最大的问题是cpu风扇噪音和温度,看网上确实存在此问题,纯铜风扇+7783硅脂是必须的,下面鲁大师温度截屏 ...

  7. Queue depth

    Queue depth - It is the number of I/O requests that can be kept waiting to be serviced in a port que ...

  8. jquery所有版本下载外链地址

    jquery-2.1.1 (注!jquery-2.0以上版本不再支持IE 6/7/8) 百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) 百度压缩版引用地址: <script src= ...

  9. .NET 并行编程——数据并行

    本文内容 并行编程 数据并行 环境 计算 PI 矩阵相乘 把目录中的全部图片复制到另一个目录 列出指定目录中的所有文件,包括其子目录 最近,对多线程编程,并行编程,异步编程,这三个概念有点晕了,之前我 ...

  10. [Python设计模式] 第10章 怎么出试卷?——模版方法模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 小时候数学老师的随堂测验,都是老师在黑板上写题目,学生在下边抄,然后再做题 ...