先上圖
就是一個簡單的彈幕發送功能
彈幕區的頁面：
<div v-show="doommData.length"> <div ></div> <div > <p v-if="item.display" v-for="(item,index) in doommData" :key="index" :id="item.id" :style="{'animation-duration':item.time+'s', top:item.top+'%',color:'#333',background:item.result.bgColor}"> <image :src="https://www.cnblogs.com/style-hyh/p/item.result.faceImage" /> <span >{{item.result.name}}:</span> <span >{{item.result.sendMessage}}</span> </p> </div> </div>
彈幕區的代碼邏輯：
// 彈幕引數class Doomm { constructor(result, top, time, color, id) { //內容，頂部距離，運行時間，顏色,id（引數可自定義增加） /** * result資料結構 * faceImage:"", * bgColor: "#57B2FF", * sendMessage: "66666", * sendTime: "2019-11-06 15:10:15", * name: "eve" * */ this.result = result; this.top = top; this.time = time; this.color = color; this.display = true; this.id = id; }}//隨機字體顏色getRandomColor() { let rgb = []; for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16); color = color.length == 1 ? "0" + color : color; rgb.push(color); } return "#" + rgb.join("");}//節流函式function throttle(fn, wait) { var canUse = true; // 設定一個開關 return function(item) { if (!canUse) { return false; } // 如果開關已經關掉了就不用往下了 canUse = false; // 利用閉包剛進來的時候關閉開關 setTimeout(() => { fn(item); canUse = true; // 執行完才打開開關 }, wait); };} //添加彈幕串列 async barrageCyclic() { await this.Arr.forEach((ele, i) => { //往彈幕串列里面添加資料 this.doommList.push( new Doomm( ele, Math.ceil(Math.random() * 70 + 10), Math.floor(Math.random() * 20 + 10), getRandomColor(), i ) ); }); this.doommData = https://www.cnblogs.com/style-hyh/p/this.doommList; },
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/27986.html
標籤：HTML5
上一篇：bootstrap總結