主要利用了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" 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>