[年会抽奖]修复弹幕重叠问题

zouyang0921
1 parent e68703dc
Showing 5 changed files with 735 additions and 10 deletions
barrage.html
img/mobile/no_auth.png
js/danmaku.js
mobile.html
server.js
@@ -16,7 +16,7 @@
     <div class="container" id="container"></div>
  
     <script src="./js/jquery.min.js"></script>
-    <script src="./js/danmaku.min.js"></script>
+    <script src="./js/danmaku.js"></script>
     <script src="//cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script>
     <script>
         var socketUrl = '//106.54.64.163:3000';
@@ -26,12 +26,15 @@
             container: document.getElementById('container')
         });
         var socket = io(socketUrl);
+        var oldTopNum, topNum;
         socket.on('barrage', function(msg) {
-            console.log('socket.on: ', msg);
+            // console.log('socket.on: ', msg);
             var colorIndex = Math.floor(Math.random() * (2 - 0 + 1)); // 生成 0-2 随机数
-            var topNum = Math.floor(Math.random() * (10 - 1 + 1) + 1); // 生成 1-10 随机数
-
-            var comment = {
+            topNum = Math.floor(Math.random() * (10 - 1 + 1) + 1); // 生成 1-10 随机数
+            while (topNum === oldTopNum) {
+                topNum = Math.floor(Math.random() * (10 - 1 + 1) + 1);
+            }
+            danmaku.emit({
                 text: msg,
                 style: {
                     fontSize: '35px',
@@ -39,8 +42,8 @@
                     color: colors[colorIndex],
                     top: topNum * 50 + 'px'
                 }
-            };
-            danmaku.emit(comment);
+            });
+            oldTopNum = topNum;
         });
     </script>
 </body>
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.Danmaku = factory());
+}(this, (function () { 'use strict';
+
+  /* eslint no-invalid-this: 0 */
+  function allocate(cmt) {
+    var that = this;
+    var ct = this._hasMedia ? this.media.currentTime : Date.now() / 1000;
+    var pbr = this._hasMedia ? this.media.playbackRate : 1;
+    function willCollide(cr, cmt) {
+      if (cmt.mode === 'top' || cmt.mode === 'bottom') {
+        return ct - cr.time < that.duration;
+      }
+      var crTotalWidth = that.width + cr.width;
+      var crElapsed = crTotalWidth * (ct - cr.time) * pbr / that.duration;
+      if (cr.width > crElapsed) {
+        return true;
+      }
+      // (rtl mode) the right end of `cr` move out of left side of stage
+      var crLeftTime = that.duration + cr.time - ct;
+      var cmtTotalWidth = that.width + cmt.width;
+      var cmtTime = that._hasMedia ? cmt.time : cmt._utc;
+      var cmtElapsed = cmtTotalWidth * (ct - cmtTime) * pbr / that.duration;
+      var cmtArrival = that.width - cmtElapsed;
+      // (rtl mode) the left end of `cmt` reach the left side of stage
+      var cmtArrivalTime = that.duration * cmtArrival / (that.width + cmt.width);
+      return crLeftTime > cmtArrivalTime;
+    }
+    var crs = this._space[cmt.mode];
+    var last = 0;
+    var curr = 0;
+    for (var i = 1; i < crs.length; i++) {
+      var cr = crs[i];
+      var requiredRange = cmt.height;
+      if (cmt.mode === 'top' || cmt.mode === 'bottom') {
+        requiredRange += cr.height;
+      }
+      if (cr.range - cr.height - crs[last].range >= requiredRange) {
+        curr = i;
+        break;
+      }
+      if (willCollide(cr, cmt)) {
+        last = i;
+      }
+    }
+    var channel = crs[last].range;
+    var crObj = {
+      range: channel + cmt.height,
+      time: this._hasMedia ? cmt.time : cmt._utc,
+      width: cmt.width,
+      height: cmt.height
+    };
+    crs.splice(last + 1, curr - last - 1, crObj);
+
+    if (cmt.mode === 'bottom') {
+      return this.height - cmt.height - channel % this.height;
+    }
+    return channel % (this.height - cmt.height);
+  }
+
+  function createCommentNode(cmt) {
+    var node = document.createElement('div');
+    node.style.cssText = 'position:absolute;';
+    if (typeof cmt.render === 'function') {
+      var $el = cmt.render();
+      if ($el instanceof HTMLElement) {
+        node.appendChild($el);
+        return node;
+      }
+    }
+    if (cmt.html === true) {
+      node.innerHTML = cmt.text;
+    } else {
+      node.textContent = cmt.text;
+    }
+    if (cmt.style) {
+      for (var key in cmt.style) {
+        node.style[key] = cmt.style[key];
+      }
+    }
+    return node;
+  }
+
+  var transform = (function() {
+    var properties = [
+      'oTransform', // Opera 11.5
+      'msTransform', // IE 9
+      'mozTransform',
+      'webkitTransform',
+      'transform'
+    ];
+    var style = document.createElement('div').style;
+    for (var i = 0; i < properties.length; i++) {
+      /* istanbul ignore else */
+      if (properties[i] in style) {
+        return properties[i];
+      }
+    }
+    /* istanbul ignore next */
+    return 'transform';
+  }());
+
+  /* eslint no-invalid-this: 0 */
+  function domEngine() {
+    var dn = Date.now() / 1000;
+    var ct = this._hasMedia ? this.media.currentTime : dn;
+    var pbr = this._hasMedia ? this.media.playbackRate : 1;
+    var cmt = null;
+    var cmtt = 0;
+    var i = 0;
+    for (i = this.runningList.length - 1; i >= 0; i--) {
+      cmt = this.runningList[i];
+      cmtt = this._hasMedia ? cmt.time : cmt._utc;
+      if (ct - cmtt > this.duration) {
+        this.stage.removeChild(cmt.node);
+        /* istanbul ignore else */
+        if (!this._hasMedia) {
+          cmt.node = null;
+        }
+        this.runningList.splice(i, 1);
+      }
+    }
+    var pendingList = [];
+    var df = document.createDocumentFragment();
+    while (this.position < this.comments.length) {
+      cmt = this.comments[this.position];
+      cmtt = this._hasMedia ? cmt.time : cmt._utc;
+      if (cmtt >= ct) {
+        break;
+      }
+      if (ct - cmtt > this.duration) {
+        ++this.position;
+        continue;
+      }
+      if (this._hasMedia) {
+        cmt._utc = dn - (this.media.currentTime - cmt.time);
+      }
+      cmt.node = cmt.node || createCommentNode(cmt);
+      this.runningList.push(cmt);
+      pendingList.push(cmt);
+      df.appendChild(cmt.node);
+      ++this.position;
+    }
+    if (pendingList.length) {
+      this.stage.appendChild(df);
+    }
+    for (i = 0; i < pendingList.length; i++) {
+      cmt = pendingList[i];
+      cmt.width = cmt.width || cmt.node.offsetWidth;
+      cmt.height = cmt.height || cmt.node.offsetHeight;
+    }
+    for (i = 0; i < pendingList.length; i++) {
+      cmt = pendingList[i];
+      cmt.y = allocate.call(this, cmt);
+      if (cmt.mode === 'top' || cmt.mode === 'bottom') {
+        cmt.x = (this.width - cmt.width) >> 1;
+        cmt.node.style[transform] = 'translateX(' + cmt.x + 'px)';
+      }
+    }
+    for (i = 0; i < this.runningList.length; i++) {
+      cmt = this.runningList[i];
+      if (cmt.mode === 'top' || cmt.mode === 'bottom') {
+        continue;
+      }
+      var totalWidth = this.width + cmt.width;
+      var elapsed = totalWidth * (dn - cmt._utc) * pbr / this.duration;
+      elapsed |= 0;
+      if (cmt.mode === 'ltr') cmt.x = elapsed - cmt.width;
+      if (cmt.mode === 'rtl') cmt.x = this.width - elapsed;
+      cmt.node.style[transform] = 'translateX(' + cmt.x + 'px)';
+    }
+  }
+
+  var canvasHeightCache = Object.create(null);
+
+  function canvasHeight(font, fontSize) {
+    if (canvasHeightCache[font]) {
+      return canvasHeightCache[font];
+    }
+    var height = 12;
+    // eslint-disable-next-line max-len
+    var regex = /(\d+(?:\.\d+)?)(px|%|em|rem)(?:\s*\/\s*(\d+(?:\.\d+)?)(px|%|em|rem)?)?/;
+    var p = font.match(regex);
+    if (p) {
+      var fs = p[1] * 1 || 10;
+      var fsu = p[2];
+      var lh = p[3] * 1 || 1.2;
+      var lhu = p[4];
+      if (fsu === '%') fs *= fontSize.container / 100;
+      if (fsu === 'em') fs *= fontSize.container;
+      if (fsu === 'rem') fs *= fontSize.root;
+      if (lhu === 'px') height = lh;
+      if (lhu === '%') height = fs * lh / 100;
+      if (lhu === 'em') height = fs * lh;
+      if (lhu === 'rem') height = fontSize.root * lh;
+      if (lhu === undefined) height = fs * lh;
+    }
+    canvasHeightCache[font] = height;
+    return height;
+  }
+
+  function createCommentCanvas(cmt, fontSize) {
+    if (typeof cmt.render === 'function') {
+      var cvs = cmt.render();
+      if (cvs instanceof HTMLCanvasElement) {
+        cmt.width = cvs.width;
+        cmt.height = cvs.height;
+        return cvs;
+      }
+    }
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    var style = cmt.canvasStyle || {};
+    style.font = style.font || '10px sans-serif';
+    style.textBaseline = style.textBaseline || 'bottom';
+    var strokeWidth = style.lineWidth * 1;
+    strokeWidth = (strokeWidth > 0 && strokeWidth !== Infinity)
+      ? Math.ceil(strokeWidth)
+      : !!style.strokeStyle * 1;
+    ctx.font = style.font;
+    cmt.width = cmt.width ||
+      Math.max(1, Math.ceil(ctx.measureText(cmt.text).width) + strokeWidth * 2);
+    cmt.height = cmt.height ||
+      Math.ceil(canvasHeight(style.font, fontSize)) + strokeWidth * 2;
+    canvas.width = cmt.width;
+    canvas.height = cmt.height;
+    for (var key in style) {
+      ctx[key] = style[key];
+    }
+    var baseline = 0;
+    switch (style.textBaseline) {
+      case 'top':
+      case 'hanging':
+        baseline = strokeWidth;
+        break;
+      case 'middle':
+        baseline = cmt.height >> 1;
+        break;
+      default:
+        baseline = cmt.height - strokeWidth;
+    }
+    if (style.strokeStyle) {
+      ctx.strokeText(cmt.text, strokeWidth, baseline);
+    }
+    ctx.fillText(cmt.text, strokeWidth, baseline);
+    return canvas;
+  }
+
+  /* eslint no-invalid-this: 0 */
+  function canvasEngine() {
+    this.stage.context.clearRect(0, 0, this.width, this.height);
+    var dn = Date.now() / 1000;
+    var ct = this._hasMedia ? this.media.currentTime : dn;
+    var pbr = this._hasMedia ? this.media.playbackRate : 1;
+    var cmt = null;
+    var cmtt = 0;
+    var i = 0;
+    for (i = this.runningList.length - 1; i >= 0; i--) {
+      cmt = this.runningList[i];
+      cmtt = this._hasMedia ? cmt.time : cmt._utc;
+      if (ct - cmtt > this.duration) {
+        // avoid caching canvas to reduce memory usage
+        cmt.canvas = null;
+        this.runningList.splice(i, 1);
+      }
+    }
+    while (this.position < this.comments.length) {
+      cmt = this.comments[this.position];
+      cmtt = this._hasMedia ? cmt.time : cmt._utc;
+      if (cmtt >= ct) {
+        break;
+      }
+      if (ct - cmtt > this.duration) {
+        ++this.position;
+        continue;
+      }
+      if (this._hasMedia) {
+        cmt._utc = dn - (this.media.currentTime - cmt.time);
+      }
+      cmt.canvas = createCommentCanvas(cmt, this._fontSize);
+      cmt.y = allocate.call(this, cmt);
+      if (cmt.mode === 'top' || cmt.mode === 'bottom') {
+        cmt.x = (this.width - cmt.width) >> 1;
+      }
+      this.runningList.push(cmt);
+      ++this.position;
+    }
+    for (i = 0; i < this.runningList.length; i++) {
+      cmt = this.runningList[i];
+      var totalWidth = this.width + cmt.width;
+      var elapsed = totalWidth * (dn - cmt._utc) * pbr / this.duration;
+      if (cmt.mode === 'ltr') cmt.x = (elapsed - cmt.width + .5) | 0;
+      if (cmt.mode === 'rtl') cmt.x = (this.width - elapsed + .5) | 0;
+      this.stage.context.drawImage(cmt.canvas, cmt.x, cmt.y);
+    }
+  }
+
+  var raf =
+    window.requestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    function(cb) {
+      return setTimeout(cb, 50 / 3);
+    };
+
+  var caf =
+    window.cancelAnimationFrame ||
+    window.mozCancelAnimationFrame ||
+    window.webkitCancelAnimationFrame ||
+    clearTimeout;
+
+  /* eslint no-invalid-this: 0 */
+  function play() {
+    if (!this.visible || !this.paused) {
+      return this;
+    }
+    this.paused = false;
+    if (this._hasMedia) {
+      for (var i = 0; i < this.runningList.length; i++) {
+        var cmt = this.runningList[i];
+        cmt._utc = Date.now() / 1000 - (this.media.currentTime - cmt.time);
+      }
+    }
+    var that = this;
+    var engine = this._useCanvas ? canvasEngine : domEngine;
+    function frame() {
+      engine.call(that);
+      that._requestID = raf(frame);
+    }
+    this._requestID = raf(frame);
+    return this;
+  }
+
+  /* eslint no-invalid-this: 0 */
+  function pause() {
+    if (!this.visible || this.paused) {
+      return this;
+    }
+    this.paused = true;
+    caf(this._requestID);
+    this._requestID = 0;
+    return this;
+  }
+
+  function binsearch(arr, prop, key) {
+    var mid = 0;
+    var left = 0;
+    var right = arr.length;
+    while (left < right - 1) {
+      mid = (left + right) >> 1;
+      if (key >= arr[mid][prop]) {
+        left = mid;
+      } else {
+        right = mid;
+      }
+    }
+    if (arr[left] && key < arr[left][prop]) {
+      return left;
+    }
+    return right;
+  }
+
+  function collidableRange() {
+    var max = 9007199254740991;
+    return [{
+      range: 0,
+      time: -max,
+      width: max,
+      height: 0
+    }, {
+      range: max,
+      time: max,
+      width: 0,
+      height: 0
+    }];
+  }
+
+  function resetSpace(space) {
+    space.ltr = collidableRange();
+    space.rtl = collidableRange();
+    space.top = collidableRange();
+    space.bottom = collidableRange();
+  }
+
+  /* eslint no-invalid-this: 0 */
+  function seek() {
+    if (!this._hasMedia) {
+      return this;
+    }
+    this.clear();
+    resetSpace(this._space);
+    var position = binsearch(this.comments, 'time', this.media.currentTime);
+    this.position = Math.max(0, position - 1);
+    return this;
+  }
+
+  /* eslint no-invalid-this: 0 */
+  function bindEvents(_) {
+    _.play = play.bind(this);
+    _.pause = pause.bind(this);
+    _.seeking = seek.bind(this);
+    this.media.addEventListener('play', _.play);
+    this.media.addEventListener('pause', _.pause);
+    this.media.addEventListener('seeking', _.seeking);
+  }
+
+  /* eslint no-invalid-this: 0 */
+  function unbindEvents(_) {
+    this.media.removeEventListener('play', _.play);
+    this.media.removeEventListener('pause', _.pause);
+    this.media.removeEventListener('seeking', _.seeking);
+    _.play = null;
+    _.pause = null;
+    _.seeking = null;
+  }
+
+  function computeFontSize(el, fontSize) {
+    var fs = window
+      .getComputedStyle(el, null)
+      .getPropertyValue('font-size')
+      .match(/(.+)px/)[1] * 1;
+    if (el.tagName === 'HTML') {
+      fontSize.root = fs;
+    } else {
+      fontSize.container = fs;
+    }
+  }
+
+  function formatMode(mode) {
+    if (!/^(ltr|top|bottom)$/i.test(mode)) {
+      return 'rtl';
+    }
+    return mode.toLowerCase();
+  }
+
+  function initMixin(Danmaku) {
+    Danmaku.prototype.init = function(opt) {
+      if (this._isInited) {
+        return this;
+      }
+
+      if (
+        !opt || (
+          !opt.container &&
+          (!opt.video || (opt.video && !opt.video.parentNode))
+        )
+      ) {
+        throw new Error('Danmaku requires container when initializing.');
+      }
+      this._hasInitContainer = !!opt.container;
+      this.container = opt.container;
+      this.visible = true;
+
+      this.engine = (opt.engine || 'DOM').toLowerCase();
+      this._useCanvas = (this.engine === 'canvas');
+      this._requestID = 0;
+
+      this._speed = Math.max(0, opt.speed) || 144;
+      this.duration = 4;
+
+      this.comments = opt.comments || [];
+      this.comments.sort(function(a, b) {
+        return a.time - b.time;
+      });
+      for (var i = 0; i < this.comments.length; i++) {
+        this.comments[i].mode = formatMode(this.comments[i].mode);
+      }
+      this.runningList = [];
+      this.position = 0;
+
+      this.paused = true;
+      this.media = opt.video || opt.audio;
+      this._hasMedia = !!this.media;
+      this._hasVideo = !!opt.video;
+      if (this._hasVideo && !this._hasInitContainer) {
+        var isPlay = !this.media.paused;
+        this.container = document.createElement('div');
+        this.container.style.position = this.media.style.position;
+        this.media.style.position = 'absolute';
+        this.media.parentNode.insertBefore(this.container, this.media);
+        this.container.appendChild(this.media);
+        // In Webkit/Blink, making a change to video element will pause the video.
+        if (isPlay && this.media.paused) {
+          this.media.play();
+        }
+      }
+      if (this._hasMedia) {
+        this._listener = {};
+        bindEvents.call(this, this._listener);
+      }
+
+      if (this._useCanvas) {
+        this.stage = document.createElement('canvas');
+        this.stage.context = this.stage.getContext('2d');
+      } else {
+        this.stage = document.createElement('div');
+        this.stage.style.cssText =
+          'overflow:hidden;white-space:nowrap;transform:translateZ(0);';
+      }
+      this.stage.style.cssText += 'position:relative;pointer-events:none;';
+
+      this.resize();
+      this.container.appendChild(this.stage);
+
+      this._space = {};
+      resetSpace(this._space);
+      this._fontSize = {
+        root: 16,
+        container: 16
+      };
+      computeFontSize(document.getElementsByTagName('html')[0], this._fontSize);
+      computeFontSize(this.container, this._fontSize);
+
+      if (!this._hasMedia || !this.media.paused) {
+        seek.call(this);
+        play.call(this);
+      }
+      this._isInited = true;
+      return this;
+    };
+  }
+
+  var properties = [
+    // meta
+    'mode', 'time',
+    // both engine
+    'text', 'render',
+    // DOM engine
+    'html', 'style',
+    // canvas engine
+    'canvasStyle'
+  ];
+
+  function emitMixin(Danmaku) {
+    Danmaku.prototype.emit = function(obj) {
+      if (!obj || Object.prototype.toString.call(obj) !== '[object Object]') {
+        return this;
+      }
+      var cmt = {};
+      for (var i = 0; i < properties.length; i++) {
+        if (obj[properties[i]] !== undefined) {
+          cmt[properties[i]] = obj[properties[i]];
+        }
+      }
+      cmt.text = (cmt.text || '').toString();
+      cmt.mode = formatMode(cmt.mode);
+      cmt._utc = Date.now() / 1000;
+      if (this._hasMedia) {
+        var position = 0;
+        if (cmt.time === undefined) {
+          cmt.time = this.media.currentTime;
+          position = this.position;
+        } else {
+          position = binsearch(this.comments, 'time', cmt.time);
+          if (position < this.position) {
+            this.position += 1;
+          }
+        }
+        this.comments.splice(position, 0, cmt);
+      } else {
+        this.comments.push(cmt);
+      }
+      return this;
+    };
+  }
+
+  function clearMixin(Danmaku) {
+    Danmaku.prototype.clear = function() {
+      if (this._useCanvas) {
+        this.stage.context.clearRect(0, 0, this.width, this.height);
+        // avoid caching canvas to reduce memory usage
+        for (var i = 0; i < this.runningList.length; i++) {
+          this.runningList[i].canvas = null;
+        }
+      } else {
+        var lc = this.stage.lastChild;
+        while (lc) {
+          this.stage.removeChild(lc);
+          lc = this.stage.lastChild;
+        }
+      }
+      this.runningList = [];
+      return this;
+    };
+  }
+
+  function destroyMixin(Danmaku) {
+    Danmaku.prototype.destroy = function() {
+      if (!this._isInited) {
+        return this;
+      }
+
+      pause.call(this);
+      this.clear();
+      if (this._hasMedia) {
+        unbindEvents.call(this, this._listener);
+      }
+      if (this._hasVideo && !this._hasInitContainer) {
+        var isPlay = !this.media.paused;
+        this.media.style.position = this.container.style.position;
+        this.container.parentNode.insertBefore(this.media, this.container);
+        this.container.parentNode.removeChild(this.container);
+        /* istanbul ignore next  */
+        if (isPlay && this.media.paused) {
+          this.media.play();
+        }
+      }
+      for (var key in this) {
+        /* istanbul ignore else  */
+        if (Object.prototype.hasOwnProperty.call(this, key)) {
+          this[key] = null;
+        }
+      }
+      return this;
+    };
+  }
+
+  function showMixin(Danmaku) {
+    Danmaku.prototype.show = function() {
+      if (this.visible) {
+        return this;
+      }
+      this.visible = true;
+      if (this._hasMedia && this.media.paused) {
+        return this;
+      }
+      seek.call(this);
+      play.call(this);
+      return this;
+    };
+  }
+
+  function hideMixin(Danmaku) {
+    Danmaku.prototype.hide = function() {
+      if (!this.visible) {
+        return this;
+      }
+      pause.call(this);
+      this.clear();
+      this.visible = false;
+      return this;
+    };
+  }
+
+  function resizeMixin(Danmaku) {
+    Danmaku.prototype.resize = function() {
+      if (this._hasInitContainer) {
+        this.width = this.container.offsetWidth;
+        this.height = this.container.offsetHeight;
+      }
+      if (this._hasVideo &&
+          (!this._hasInitContainer || !this.width || !this.height)) {
+        this.width = this.media.clientWidth;
+        this.height = this.media.clientHeight;
+      }
+      if (this._useCanvas) {
+        this.stage.width = this.width;
+        this.stage.height = this.height;
+      } else {
+        this.stage.style.width = this.width + 'px';
+        this.stage.style.height = this.height + 'px';
+      }
+      this.duration = this.width / this._speed;
+      return this;
+    };
+  }
+
+  function speedMixin(Danmaku) {
+    Object.defineProperty(Danmaku.prototype, 'speed', {
+      get: function() {
+        return this._speed;
+      },
+      set: function(s) {
+        if (typeof s !== 'number' ||
+            isNaN(s) ||
+            !isFinite(s) ||
+            s <= 0) {
+          return this._speed;
+        }
+        this._speed = s;
+        if (this.width) {
+          this.duration = this.width / s;
+        }
+        return s;
+      }
+    });
+  }
+
+  function Danmaku(opt) {
+    this._isInited = false;
+    opt && this.init(opt);
+  }
+
+  initMixin(Danmaku);
+  emitMixin(Danmaku);
+  clearMixin(Danmaku);
+  destroyMixin(Danmaku);
+  showMixin(Danmaku);
+  hideMixin(Danmaku);
+  resizeMixin(Danmaku);
+  speedMixin(Danmaku);
+
+  return Danmaku;
+
+})));
@@ -133,6 +133,9 @@
         .dialog-reverse-btn {background: url('./img/mobile/dialog_btn_cancel.png') no-repeat;background-size: 100% 100%;color: #CF3727;}
         .dialog-close {position: absolute;top: -.6rem;right: .26rem;width: .76rem;height: .76rem;background: url('./img/mobile/dialog_close.png') no-repeat;background-size: 100% 100%;}
  
+        .no-auth {width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: .32rem;color: #000;}
+        .no-auth-icon {width: 3rem;margin-bottom: .3rem;}
+        .no-auth-text {padding-bottom: 2rem;}
         .toast-tip {display: none;position: fixed;bottom: 50%;left: 50%;transform: translateX(-50%);z-index: 11;opacity: 0;padding: 0 .5rem;height: .84rem;background: rgba(0, 0, 0, .8);border-radius: .06rem;transition: opacity 1s ease-out;line-height: .84rem;text-align: center;font-size: .28rem;color: #fff;}
         .clearfix:after {content: " ";display: block;height: 0;visibility: hidden;clear: both;}
         .hide {display: none;}
@@ -315,6 +318,12 @@
         </div>
     </div>
  
+    <!-- 非微信浏览器打开 -->
+    <div class="no-auth hide">
+        <img class="no-auth-icon" src="./img/mobile/no_auth.png">
+        <span class="no-auth-text">请在微信中使用</span>
+    </div>
+
     <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
     <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
     <script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
@@ -323,8 +332,14 @@
     <script src="./js/template.js"></script>
     <script src="mobile.js?t=2"></script>
     <script>
-        var vConsole = new VConsole();
-        action.init();
+        var ua = window.navigator.userAgent.toLowerCase();
+        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
+            var vConsole = new VConsole();
+            action.init();
+        } else {
+            $('.wrap, .dialog-wrap').hide();
+            $('.no-auth').css('display', 'flex');
+        }
     </script>
  
     <script type="text/html" id="seatListTmpl">
@@ -55,7 +55,7 @@ io.on(&#39;connection&#39;, function(socket) {
         timer = setInterval(function() {
             var msg = defaultMsgs[Math.floor(Math.random() * (19 - 0 + 1))];
             io.emit('barrage', msg);
-        }, 24000);
+        }, 25000);
     });
  
     // 断开连接