基于定时器延时器的简单打字效果——拿去表白吧

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于定时器延时器的简单打字效果——拿去表白吧相关的知识,希望对你有一定的参考价值。

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

以上是关于基于定时器延时器的简单打字效果——拿去表白吧的主要内容,如果未能解决你的问题,请参考以下文章

听说有人要学C语言!30条代码,拿去“表白”

从打字机效果的 N 种实现看JS定时器机制和前端动画

js定时器实现一个个字输入的打字效果

基于51单片机定时器计数+2片74HC595联级+8位数码管时钟+按键修改时间

七夕表白小代码喜欢的拿去

android表白app