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 美化一下，拿去撩妹效果爆炸！