mpvue small program development to achieve a barrage of comments

 

 First on the map

Is a simple barrage sending

Barrage area of ​​the page:

      <div class="content" v-show="doommData.length">
        <div class="textLeft"></div>
        <div class="textItem">
          <p class="text aon" 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="item.result.faceImage" class="headImg" />
            <span class="name">{{item.result.name}}:</span>
            <span class="text">{{item.result.sendMessage}}</span>
          </p>
        </div>
      </div>

Barrage area code logic:

// barrage parameter 
class Doomm {
  constructor(result, top, time, color, id) {
    // content, from the top, running time, color, ID (customizable parameter increase) 
    / * *
     * Result data structure
     * 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;
  }
}
// random font color 
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("");
}
// throttle function 
function Throttle (Fn, the wait) {
   var canuse = to true ; // set a switch 
  return  function (Item) {
     IF (! Canuse) {
       return  to false ;
    } // If the switch has been turned off do not have a down 
    canuse = to false ; // use the closure just came off switch when 
    the setTimeout (() => {
      fn(item);
      canuse = to true ; // executing the open switch until 
    }, wait);
  };
}
    // Add barrage list 
    async barrageCyclic () {
      the await the this .Arr.forEach ((ELE, I) => {
         // To barrage listing data which added 
        the this .doommList.push (
           new new Doomm (
            him,
            Math.ceil(Math.random() * 70 + 10),
            Math.floor(Math.random() * 20 + 10),
            getRandomColor (),
            i
          )
        );
      });
      this.doommData = this.doommList;
    },