使用typed.js實現頁面上的寫字功能
阿新 • • 發佈：2018-11-02
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/[email protected]"></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>