js实现文字逐个显示

最新推荐文章于 2023-11-16 19:25:41 发布

weixin_33701251

最新推荐文章于 2023-11-16 19:25:41 发布

阅读量221

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/tiny-rogue/p/3284071.html

版权

先把代码摆上了吧:

 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都简便, 我也是才知道.

转载于:https://www.cnblogs.com/tiny-rogue/p/3284071.html

weixin_33701251

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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实...
复制链接

扫一扫