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 高效运行代码分析
Mar 18 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
vue使用codemirror的两种用法
Aug 27 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
使用adodb lite解决问题
2006/12/31 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
css配合jquery美化 select
2013/11/29 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python socket实现简单聊天室
2018/04/01 Python
Python学习小技巧总结
2018/06/10 Python
python自动发送邮件脚本
2018/06/20 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
python字典的值可以修改吗
2020/06/29 Python
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
采购主管的岗位职责
2013/12/17 职场文书
小学英语教学反思
2014/01/30 职场文书
小学生元旦广播稿
2014/02/21 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
道路施工安全责任书
2014/07/24 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
保研推荐信范文
2015/03/25 职场文书
人民检察院起诉书
2015/05/20 职场文书
人生遥控器观后感
2015/06/11 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android