js觀察者模式的彈幕案例
阿新 • • 發佈:2020-11-24
本文例項為大家分享了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 }) } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。