主要利用了setTimeout(),递归和String.substring();

做出的效果就像是有一个打字员在打字.

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>Document</title>
10  </head>
11  <body bgcolor="#ccc" onload="printer();">
12     <h2 align="center">文本自动输出</h2>
13     <br>
14     <br>
15     <hr width="400" color="black">
16     <br>
17   <form align="center">
18     <textarea cols="50" rows="30"  wrap=virtual></textarea>
19   </form>
20  </body>
21  <script type="text/javascript">
22 
23     //获取textarea对象
24     var text=document.getElementById("text");
25     //要输出的内容
26     var str="    传统的HTML语言不能开发交互式的动态网页,而JavaScript却能很好的做到这一点。JavaScript是一门相当简单易学的网络化编程语言,通过把她和HTML语言相互结合起来,能够实现实时的动态网页特效,这给网页浏览者在浏览网页的同时也提供了某些乐趣。";
27     var pos=0;
28     //利用递归和setTimeout()实现文字输出
29     function printer(){
30         text.value=str.substring(0,pos)+"|";
31         //判断是否到达结尾.如果是则一秒后再来一遍.
32         if(pos++>str.length){
33             pos=0;
34             setTimeout("printer()",1000);
35         }else{
36             setTimeout("printer()",50);
37         }
38     }
39  </script>
40 </html>

 

相关文章:

  • 2021-12-18
  • 2022-02-17
  • 2022-12-23
  • 2021-07-30
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-05-05
  • 2022-12-23
  • 2021-11-06
  • 2021-05-09
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案