这篇文章上次修改于 2077 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

1.我是最后一个打印出来的

效果是 一个一个打印，然后停止

       
    style type="text/css">
/* 如果光标没出现，而是出现在下一行，那么就是盒子是块级标签，必须得转换成行内标签 */
h2 {
  display: inline;
}
/* 想让的光标闪动的话，复制下面的代码 */
.typed-cursor{
  opacity: 1;
  animation: typedjsBlink 0.7s infinite;
  -webkit-animation: typedjsBlink 0.7s infinite;
  animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
  50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
  0% { opacity: 1; }
  50% { opacity: 0.0; }
  100% { opacity: 1; }
}
.typed-fade-out{
  opacity: 0;
  transition: opacity .25s;
  -webkit-animation: 0;
  animation: 0;
}
</style>

<span id="box"></span>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
   var boxObj = document.getElementById('box');
   new Typed(boxObj,{
      // 注意：输出的可以是标签，将标签当节点运行。比如下面的h2
      strings: ['<h2>我是打印字typed.js<h2>','我是案例一222','我是最后一个打印出来的'],
      typeSpeed:200 // 速度
   });
</script>

2.循环打印

   <span id="box2"></span>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
   var boxObj2 = document.getElementById('box2');
   new Typed(boxObj2,{
      strings: ['我要无限循环','设置了loop','还必须得设置loopCount'],
      typeSpeed: 200,
      startDelay: 100,
      loop: true,
      loopCount: Infinity
   });
</script>

3.我改变了光标的样子，变成了箭头 ➼！

<span id="box3"></span>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
   var boxObj3 = document.getElementById('box3');
   new Typed(boxObj3,{
      strings: ['我改变了光标的样子，变成了箭头 ➼！哈哈哈'],
      typeSpeed: 200,
      startDelay: 100,
      loop: true,
      loopCount: Infinity,
      cursorChar: '➼' // 
   });
</script>