主要利用了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>
新闻热点
疑难解答
