使用jq实现打印机的效果

本例中使用的是jq和es6的语法，代码如下：

html:

<div id="box">
  this is test <br/>
   这是测试用的
</div>

css样式表：

  <style>
    #box {
      display: none;
      border: 1px solid #ccc;
      margin: 20px 30em;
      padding: 20px;
      line-height: 1.8;
      font: 14px/1.8 "microsoft yahei";
    }
 
    #box:after {
      content: "_";
      animation: flash .6s steps(2, start) infinite;
    }
 
    @keyframes flash {
      0% {
        visibility: visible;
      }
      100% {
        visibility: hidden;
      }
    }
 
  </style>

　jq：

<script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>
<script>
  $(() => {
    let index = 0;
    let code = $("#box").html();
    $("#box").html("").css("display","block");
    let start = () => {
      index++;
      if (index <= code.length) {
        switch (code.charAt(index)) {
          case "<":
            index = code.indexOf(">", index);
            break;
          case "&":
            index = code.indexOf(";", index);
            break;
        }
        $("#box").html(code.substring(0, index));
        setTimeout(start, 100)
      }
    };
    start();
  })
</script>

　　效果如下：