js观察者模式的弹幕案例


Posted in Javascript onNovember 23, 2020

本文实例为大家分享了js观察者模式的弹幕案例代码,供大家参考,具体内容如下

观察者模式的弹幕案例

上代码

js观察者模式的弹幕案例

弹幕.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input{
    
      width:1208px;
      height: 38px;
      font-size: 30px;
      position: absolute;
    }
    .div0{
      width:1208px;
      height: 768px;
      position: relative;
      overflow: hidden;
    }
    video{
    width:1208px;
      height: 720px;
    }
  </style>
</head>
<body>
  <div class="div0">
    <video src="./y2mate.com - nylonjapan11_wjhIR0JdoXA_1080p.mp4" controls></video>
    <br>
   
    <input type="text">
  </div>
  <script type="module">
    import Bullet from "./observer/Bullet.js";//导入模块
    var input=document.querySelector("input");
    document.addEventListener("keyup",keyHandler);
//input的键盘监听事件按回车实例化BUllet
    function keyHandler(e){
      if(e.keyCode!==13) return;
      if(input.value.trim().length===0) return;
      var bullet=new Bullet(input.value);
      bullet.appendTo(".div0");
      input.value="";
    }
  </script>
</body>
</html>

bullet.js:

import TimeManager from "./TimeManager.js";//导入观察者

export default class Bullet {
  rect;
  x;
  speed = 2;
  width;
  constructor(txt) {
    this.elem = this.createElem(txt);
  }
  //创建弹幕
  createElem(txt) {
    if (this.elem) return this.elem;
    var div = document.createElement("div");
    Object.assign(div.style, {
      whiteSpace: "nowrap",
      position: "absolute",
    })
    div.textContent = txt
    return div;
  }
  //将弹幕随机位置插入视屏中并且将弹幕插入到观察者中的list数组中
  appendTo(parent) {
    if (typeof parent === "string") parent = document.querySelector(parent);
    parent.appendChild(this.elem);
    this.rect = parent.getBoundingClientRect();
    Object.assign(this.elem.style, {
      top: Math.random() * this.rect.height / 4 + "px",
      left: this.rect.width + "px"
    });
    this.x = this.rect.width;
    this.width = this.elem.offsetWidth;
    TimeManager.instance.add(this);
  }
  //使弹幕移动,并给限制如果弹幕移出视频,则在list中删除此元素
  update() {
    if (!this.width) return;
    this.x -= this.speed;
    this.elem.style.left = this.x + "px";
    if (this.x < -this.width) {
      TimeManager.instance.remove(this);
      this.elem.remove();
      this.elem = null;
    }
  }
}

TimeManager.js:

export default class TimeManager {
  static _instance
  list = new set()//设置一个set类型的变量
  ids
  constructor() {

  }
  static get instance() {
    //设置一个静态方法,此为单例模式,
    if (!TimeManager._instance) {
      Object.defineProperty(TimeManager, '_instance', {
        value: new TimeManager()
      })//给TimeManager设置属性如果没有则赋值为实例并保存,有则直接给保存的实例
    }
    return TimeManager._instance;
  }
  //将带入的变量加入到list中如果list中有元素时则没16ms调用updata方法
  add(elem) {
    this.list.add(elem)
    if (this.list.size > 0 && !this.ids) {
      this.ids = setInterval(() => this.updata(), 16)
    }
  }
  //将带入的变量从list中删除,如果list中没有变量了就将定时器关闭,销毁定时器
  remove(elem) {
    this.list.delete(elem)
    if (this.list.size === 0 && this.ids) {
      clearInterval(this.ids)
      this.ids = undefined
    }
  }
  //遍历所有list里的元素,如果元素带有updata方法,则调用updata方法
  updata() {
    this.list.forEach(item => {
      if (item.updata) item.updata
    })
  }
}

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

Javascript 相关文章推荐
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
js异步接口并发数量控制的方法示例
Nov 22 #Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 #Vue.js
ES6学习教程之Promise用法详解
Nov 22 #Javascript
Node.js文本文件BOM头的去除方法
Nov 22 #Javascript
JavaScript手写数组的常用函数总结
Nov 22 #Javascript
JavaScript实现点击图片换背景
Nov 20 #Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 #Javascript
You might like
用php和MySql来与ODBC数据连接
2006/10/09 PHP
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
写给女朋友的道歉信
2014/01/12 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
班级课外活动总结
2014/07/09 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
教师个人师德总结
2015/02/06 职场文书