案例一:

案例源码:


<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>

案例二:


<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>

案例三:


<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>

案例四:


<input type="text" class="box4" name="">
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
   new Typed('.box4',{
      strings: ['我也可以在input中打印...飘飘~<h3>标签还是打印出来</h3>'],
      typeSpeed: 200,
      startDelay: 100,
      loop: true,
      loopCount: Infinity,
      cursorChar: '➼' // 
   });
</script>

案例五:


<input type="text" class="box5" name="">
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
  new Typed('.box5',{
	strings: ['进入焦点停止'],
	typeSpeed: 200,
	startDelay: 100,
	loop: true,
	loopCount: Infinity,
	bindInputFocusEvents:true,
	onComplete:function (e) {
	  console.log('打印成功,返回参数:',e)
    },
    preStringTyped:function (can1,can2) {
	  console.log('打印之前回调',can1,can2)
	}
	// 其他的事件,就不写了,在手册里面已经标注了
  });
</script>

案例六:




<input type="text" class="box6" name="">
<br>
<br>
<button class="start">开始</button>
<button class="stop">暂停</button>
<button class="toggle">切换</button>
<button class="reset">重置</button>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
var startBtn = document.querySelector('.start');
var stopBtn = document.querySelector('.stop');
var toggleBtn = document.querySelector('.toggle');
var resetBtn = document.querySelector('.reset');
var typed = new Typed('.box6',{
  strings: ['温故而知新,可以为师矣。学而不思则罔 思而不学则殆。见贤思齐焉,见不贤而内自省也。'],
  typeSpeed: 200,
  startDelay: 100,
  loop: true,
  loopCount: Infinity,
  bindInputFocusEvents:true
});
startBtn.onclick = function () {
  typed.start();
}
stopBtn.onclick = function () {
  typed.stop();
}
toggleBtn.onclick = function () {
  typed.toggle();
}
resetBtn.onclick = function () {
  typed.reset();
}
</script>