1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 6 <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script> 7 </head> 8 <body> 9 <div id="dear"></div> 10 <script> 11 var writeContent = 'DengYanBo I Love You Forver';//要书写的内容 12 var displayContent = $('#dear');//展示书写文字的容器 13 var index = 0;//索引 14 var length = writeContent.length;//书写内容的长度 15 var tiemerName = null;//定时器的名字 16 function start(){ 17 displayContent.text('');//清空展示容器的内容 18 tiemerName=setInterval(function(){ 19 displayContent.append(writeContent.charAt(index));//charAt返回指定所应出的字符； 20 if(index++ === length){//如果写道最后一个字符了，清除定时器，从第一个字符重新开始写； 21 clearInterval(tiemerName);//清除定时器 22 index = 0; 23 start()//回调，自己调用自己 24 } 25 },100); 26 } 27 start(); 28 29 </script> 30 </body> 31 </html>