电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

js觀察者模式的彈幕案例

瀏覽:91日期:2024-04-12 09:12:12

本文實(shí)例為大家分享了js觀察者模式的彈幕案例代碼,供大家參考,具體內(nèi)容如下

觀察者模式的彈幕案例

上代碼

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='http://www.hdgsjgj.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); } //使彈幕移動,并給限制如果彈幕移出視頻,則在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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 北京租车公司_汽车/客车/班车/大巴车租赁_商务会议/展会用车/旅游大巴出租_北京桐顺创业租车公司 | 电解抛光加工_不锈钢电解抛光_常州安谱金属制品有限公司 | 水厂污泥地磅|污泥处理地磅厂家|地磅无人值守称重系统升级改造|地磅自动称重系统维修-河南成辉电子科技有限公司 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | RV减速机-蜗轮蜗杆减速机-洗车机减速机-减速机厂家-艾思捷 | 智能终端_RTU_dcm_北斗星空自动化科技 | 温州食堂承包 - 温州市尚膳餐饮管理有限公司 | 温湿度记录纸_圆盘_横河记录纸|霍尼韦尔记录仪-广州汤米斯机电设备有限公司 | 大米加工设备|大米加工机械|碾米成套设备|大米加工成套设备-河南成立粮油机械有限公司 | 消电检公司,消电检价格,北京消电检报告-北京设施检测公司-亿杰(北京)消防工程有限公司 | 兰州UPS电源,兰州山特UPS-兰州万胜商贸 | 自清洗过滤器,浅层砂过滤器,叠片过滤器厂家-新乡市宇清净化 | 二氧化碳/活性炭投加系统,次氯酸钠发生器,紫外线消毒设备|广州新奥 | 咖啡加盟-咖啡店加盟-咖啡西餐厅加盟-塞纳左岸咖啡西餐厅官网 | 东莞注册公司-代办营业执照-东莞公司注册代理记账-极刻财税 | 3d可视化建模_三维展示_产品3d互动数字营销_三维动画制作_3D虚拟商城 【商迪3D】三维展示服务商 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 水厂自动化|污水处理中控系统|水利信息化|智慧水务|智慧农业-山东德艾自动化科技有限公司 | 美国查特CHART MVE液氮罐_查特杜瓦瓶_制造全球品质液氮罐 | 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 | 杭州荣奥家具有限公司-浙江办公家具,杭州办公家具厂 | 断桥铝破碎机_发动机破碎机_杂铝破碎机厂家价格-皓星机械 | 防勒索软件_数据防泄密_Trellix(原McAfee)核心代理商_Trellix(原Fireeye)售后-广州文智信息科技有限公司 | 医疗仪器模块 健康一体机 多参数监护仪 智慧医疗仪器方案定制 血氧监护 心电监护 -朗锐慧康 | 深圳天际源广告-形象堆头,企业文化墙,喷绘,门头招牌设计制作专家 | 井式炉-台车式回火炉-丹阳市电炉厂有限公司 | 山东艾德实业有限公司 | HEYL硬度计量泵-荧光法在线溶解氧仪-净时测控技术(上海)有限公司 | 北京租车公司_汽车/客车/班车/大巴车租赁_商务会议/展会用车/旅游大巴出租_北京桐顺创业租车公司 | 懂研帝_专业SCI论文润色机构_SCI投稿发表服务公司 | 板框压滤机-隔膜压滤机配件生产厂家-陕西华星佳洋装备制造有限公司 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 沈阳激光机-沈阳喷码机-沈阳光纤激光打标机-沈阳co2激光打标机 | 垃圾清运公司_环卫保洁公司_市政道路保洁公司-华富环境 | 精密机械零件加工_CNC加工_精密加工_数控车床加工_精密机械加工_机械零部件加工厂 | 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | 上海租奔驰_上海租商务车_上海租车网-矢昂汽车服务公司 | 深圳律师咨询_深圳律师事务所_华荣【免费在线法律咨询】网 | 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | 全温恒温摇床-水浴气浴恒温摇床-光照恒温培养摇床-常州金坛精达仪器制造有限公司 | 西安微信朋友圈广告投放_微信朋友圈推广_西安度娘网络科技有限公司 | 智能案卷柜_卷宗柜_钥匙柜_文件流转柜_装备柜_浙江福源智能科技有限公司 |