2018の回顾 [typewriter effect]

.vue

<template>
  <div class="home">
    <div class="slogan">2018の回顾 🤦🏻‍♂️</div>
    <div class="title shining">点击探索 🍖</div>
    <audio style="display:none" id="type"></audio>
    <audio style="display:none" id="bg"></audio>
    <div id="typedtext"></div>
  </div>
</template>

<style lang="less">
#typedtext {
  transition: all 0.5s ease;
  height: auto;
  width: auto;
  overflow: scroll;
  position: relative;
  margin: 0 auto;
  padding-top: 3em;
  font-family: cursive;
  font-size: 14px;
  letter-spacing: 1px;
  padding-bottom: 20px;
  box-sizing: content-box;
}
.slogan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 38px;
  font-weight: 100;
  font-family: auto;
  animation: ease-in 1s ease forwards;
}

.slogan-hide {
  animation: ease-out 1s ease-out forwards;
}

.shining {
  animation: ease-in 0.8s ease infinite 1.6s alternate-reverse;
}

.title {
  opacity: 0;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-weight: 100;
  font-family: auto;
  color: #666;
}

@keyframes ease-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ease-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

<script>
import bg from "../assets/bg.mp3";
import type from "../assets/type.wav";
import lords from "../lords/showtime";
const { Howl } = require("howler");

// 展示的文本
const myWords = lords;
export default {
  data: () => {
    return {
      aText: myWords,
      // 打印delay的速度
      iSpeed: 100,
      // 数组开始打印的位置
      iIndex: 0,
      // 一行文本的长度
      iArrLength: myWords[0].length,
      // 多行文本滚动限度
      iScrollAt: 20,
      // 文本标位初始值
      iTextPos: 0,
      // 初始化占位内容
      sContents: '',
      // 当前光标所在行
      iRow: 0,
      // 字符计时器和行数计时器
      lTimer: null,
      wTimer: null,
    };
  },
  methods: {
    /**
    * @function 播放音乐
    * @param {String} type 音乐类型
    * @param {Stream} source 音乐流媒体
    */
    playSound(type, source) {
      let sound = new Howl({
        src: [source],
        loop: true
      });

      this[type + 'Sound'] = sound;

      sound.once('load', function() {
        // 兼容部分浏览器无法触发touch
        let btn = document.querySelector('#' + type);
        let event = document.createEvent('Events');
        event.initEvent('touchend', true, true);
        btn.dispatchEvent(event);
        sound.play();
      });
    },

    /**
    * @function 打印字符
    */
    typewriter() {
      let _ = this;

      _.sContents = '';
      // 设置最大显示行数
      _.iRow = Math.max(0, _.iIndex - _.iScrollAt);
      let destination = document.getElementById("typedtext");

      // 元素打印完当前行移位下一行
      while (_.iRow < _.iIndex) {
        _.sContents += _.aText[_.iRow++] + "<br />";
      }
      // 拼接字符串
      destination.innerHTML =
        _.sContents + _.aText[_.iIndex].substring(0, _.iTextPos) + "_";

      // 光标向右移动
      if (_.iTextPos++ == _.iArrLength) {
        _.iTextPos = 0;
        // 移到行尾行号加1
        _.iIndex++;
        if (_.iIndex != _.aText.length) {
          // 每次打印到下一行进行字符长度重新赋值
          _.iArrLength = _.aText[_.iIndex].length;
          _.wTimer = setTimeout(_.typewriter, 500);
        } else {
          // 文本打印完毕，去掉光标
          destination.innerHTML = destination.innerHTML.substring(
            0,
            destination.innerHTML.length - 1
          );
          _.typeSound.pause();
        }
      } else {
        _.lTimer = setTimeout(_.typewriter, _.iSpeed);
      }
    },

    /**
    * @function 启动打印机
    */
    launch() {
      document.querySelector(".slogan").className = "slogan slogan-hide";
      document.querySelector(".shining").className = "title slogan-hide";
      this.playSound("bg", bg);
      this.playSound("type", type);
      this.typewriter();
    },

    /**
    * @function 判断是否PC
    * @return {boolean} flag 终端的判断值
    */
    isPC() {
      let userAgentInfo = navigator.userAgent;
      let Agents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod"
      ];
      let flag = true;
      for (let v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    }
  },

  mounted() {
    if (this.isPC()) {
      document.addEventListener("click", () => {
        this.launch();
      });
    } else {
      document.addEventListener("touchstart", () => {
        this.launch();
      });
    }
  },

  destroyed() {
    this.lTimer = clearInterval(this.lTimer);
    this.wTimer = clearInterval(this.wTimer);
    if (this.isPC()) {
      document.removeEventListener("click", () => {
        this.launch();
      });
    } else {
      document.removeEventListener("touchstart", () => {
        this.launch();
      });
    }
  }
};
</script>

publish build version to Netlify.com 💯

http://2018summary.netlify.com