原生 JS 实现打印机效果，一个字一个字出现，再一个字一个字消失，如此循环

  最近写毕设时候，打算实现一个打印机效果放在首页，即，一个字一个字出现，再一个字一个字消失，如此循环。如下图为大概样子：

  最初我是用原生js实现的。只不过感觉代码有点…冗余吧，但是功能是没问题的，亲测可用。下面粘贴一下代码：

  首先是 html代码：

<div class="desc">
  <span id="text"></span>
  <span id="bar">|</span>
</div>

  然后是 js代码：

var i = 0;
var str = "世界奇奇怪怪，愿你可可爱爱！";
//自动打字效果
function typing() {
  var mydiv = document.getElementById("text");
  document.getElementById("bar").style.cssText = "display:none";
  mydiv.innerText = str.substring(0, i++) + (i > str.length ? "" : "|");
  var typingTimer = setTimeout(typing, 500);
  if (i > str.length) {
    clearTimeout(typingTimer);
    // 竖杠闪烁效果
    var twinkleTimer = setInterval(twinkle, 500);
    setTimeout(function () {
      clearInterval(twinkleTimer);
      document.getElementById("bar").style.cssText = "display:none";
      //自动删除文字效果
      deleteText();
    }, 3000);
  }
}
typing();

//自动删除文字效果
function deleteText() {
  var mydiv = document.getElementById("text");
  mydiv.innerText = str.substring(0, i--) + "|";
  var deleteTextTimer = setTimeout(deleteText, 50);
  if (i < 0) {
    clearTimeout(deleteTextTimer);
    //删除完后，自动打字，达到循环
    typing();
  }
}

// 竖杠闪烁效果
var flag = 0;
function twinkle() {
  if (flag) {
    document.getElementById("bar").style.cssText = "color:#fff;";
    flag = 0;
  } else {
    document.getElementById("bar").style.cssText = "color:#ffffff47;";
    flag = 1;
  }
}

  如此就ok啦。

  我是在vue项目中尝试实现的这个功能，直接写在了 mounted里，亲测可用。

  大家有什么需求可在代码基础上进行更改。

  后来了解到有关于打字机效果的js插件：typed.js，

  附一下链接：https://github.com/mattboldt/typed.js/，
  https://mattboldt.com/demos/typed-js/

  后来我用typed.js插件延伸的vue-typed-js插件试了一下，感觉挺ok，也写了一篇博客，附一下博客地址：在 vue 中使用 vue-typed-js 实现打字机效果