主要利用了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" >
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" id="text" style="background-color:#FF99CC; color: #330033; cursor: default; font-family: Arial; font-size: 18px" 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>
时间： 2024-08-29 06:55:01