js实现文字逐个显示

先把代码摆上了吧:

 1 <!DOCTYPE html>
 2 
 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>
 7         js实现文字逐渐显示
 8     </title>
 9     <script type="text/javascript">
10         var paper = "真的学渣 | 敢于面对惨淡的成绩 | 敢于正视辅导员的双眸 . . .";
11         var count = 1;
12         function oneByOne()
13         {
14             var screen = paper.substr(0, count);
15             loopText.innerHTML = screen;   
16             count++;
17             if (count > paper.length)
18                 return;
19             setTimeout(oneByOne, 250);
20         }
21         onload = oneByOne;
22     </script>
23     <style type="text/css">
24         #test {
25             position:absolute;
26             right:15em;
27             top:1em;
28             width:1px;              
29         color:#ff0000;
30             font-size:20px;
31             font-weight:bold;
32         }
33     </style>
34 </head>
35 <body>
36     <div id="test">
37         <p id="loopText"></p>
38     </div>
39 </body>
40 </html>

如果你也像我样是菜鸟, 那我就啰嗦几句.
上面处于无聊,加了一些css, 与功能无关.

文字逐个显示是通过oneByOne函数的递归调用实现的, 每250毫秒更新一次. 每更行一次多加一个字.

若想显示完再次重头开始的话, 可以将js代码if内的语句由return改为 count=0;

  最后请注意13行的用法,直接使用id来改变值, 很实用的语法, 比jquery都简便, 我也是才知道.

posted @ 2013-08-27 01:41  微温的便当  阅读(4652)  评论(0)  编辑  收藏  举报