js觀察者模式的彈幕案例
本文實(shí)例為大家分享了js觀察者模式的彈幕案例代碼，供大家參考，具體內(nèi)容如下
觀察者模式的彈幕案例
上代碼
彈幕.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='http://m.lshqa.cn/bcjs/y2mate.com - nylonjapan11_wjhIR0JdoXA_1080p.mp4' controls></video> <br> <input type='text'> </div> <script type='module'> import Bullet from './observer/Bullet.js';//導(dǎo)入模塊 var input=document.querySelector('input'); document.addEventListener('keyup',keyHandler);//input的鍵盤監(jiān)聽事件按回車實(shí)例化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';//導(dǎo)入觀察者export default class Bullet { rect; x; speed = 2; width; constructor(txt) { this.elem = this.createElem(txt); } //創(chuàng)建彈幕 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; } //將彈幕隨機(jī)位置插入視屏中并且將彈幕插入到觀察者中的list數(shù)組中 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); } //使彈幕移動(dòng)，并給限制如果彈幕移出視頻，則在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()//設(shè)置一個(gè)set類型的變量 ids constructor() { } static get instance() { //設(shè)置一個(gè)靜態(tài)方法，此為單例模式， if (!TimeManager._instance) { Object.defineProperty(TimeManager, ’_instance’, {value: new TimeManager() })//給TimeManager設(shè)置屬性如果沒有則賦值為實(shí)例并保存，有則直接給保存的實(shí)例 } return TimeManager._instance; } //將帶入的變量加入到list中如果list中有元素時(shí)則沒16ms調(diào)用updata方法 add(elem) { this.list.add(elem) if (this.list.size > 0 && !this.ids) { this.ids = setInterval(() => this.updata(), 16) } } //將帶入的變量從list中刪除，如果list中沒有變量了就將定時(shí)器關(guān)閉，銷毀定時(shí)器 remove(elem) { this.list.delete(elem) if (this.list.size === 0 && this.ids) { clearInterval(this.ids) this.ids = undefined } } //遍歷所有l(wèi)ist里的元素，如果元素帶有updata方法，則調(diào)用updata方法 updata() { this.list.forEach(item => { if (item.updata) item.updata }) }}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問題2. SpringBoot+TestNG單元測試的實(shí)現(xiàn)3. vue實(shí)現(xiàn)web在線聊天功能4. idea配置jdk的操作方法5. Springboot 全局日期格式化處理的實(shí)現(xiàn)6. python 浮點(diǎn)數(shù)四舍五入需要注意的地方7. Docker容器如何更新打包并上傳到阿里云8. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法9. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法10. JAMon(Java Application Monitor)備忘記
網(wǎng)公網(wǎng)安備