基於定時器延時器的簡單打字效果——拿去表白吧
阿新 • • 發佈：2017-09-19
打字效果 css 500px 控制 基於 wav 裏的 漢字 rip
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 #div1{ 9 width: 300px; height: 500px; margin: 0 auto;border: 10px solid skyblue; border-radius: 10px; 10 line-height: 2; font-size: 16px; padding: 20px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="div1"></div> 16 </body> 17 </html> 18 <script> 19 var str="關關雎鳩，在河之洲。$窈窕淑女，君子好逑。$參差荇菜，左右流之。$窈窕淑女，寤寐求之。$求之不得，寤寐思服。$悠哉悠哉，輾轉反側。$參差荇菜，左右采之。$窈窕淑女，琴瑟友之。$參差荇菜，左右芼之。$窈窕淑女，鐘鼓樂之。"; 20 var l= str.length;21 var i=0; 22 var timer=setInterval(function(){ 23 var span=document.createElement("span"); 24 div1.appendChild(span); 25 span.innerHTML="_"; 26 27 setTimeout(function(){ 28 if(str[i]=="$"){ 29 span.innerHTML="<br>";30 }else{ 31 span.innerHTML=str[i]; 32 } 33 i++; 34 var aud=document.createElement("audio"); 35 aud.src="audio/7571.wav"; 36 aud.autoplay="autoplay"; 37 },50); 38 if(i==l-1){ 39 clearInterval(timer); 40 } 41 },150); 42 43 </script>
首先，要有一個你想要輸出的字符串在這裏我用了詩經裏的關雎，畢竟技術是為生活提供服務的，因為代碼本身原因，一次只能寫入一個字符，所以在這裏我自己自定義一個換行符號，在這裏我用了$來代替換行，同理，你也可以以自定義一些你自己所需要的符號甚至是節點。先把字符用下標表示來控制每一次字符，代碼非常之簡單，只有一個定時器，因為定時器是無限執行的，我們可以用定時器來持續生成一個個的漢字，延時器只執行一次，可以在每一次定時器執行過過程中插入一個延時器用來做打字效果，有興趣的可以再用css 美化一下，拿去撩妹效果爆炸！
基於定時器延時器的簡單打字效果——拿去表白吧