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