Javascript实现打字效果

最新推荐文章于 2024-09-12 23:23:34 发布

vchenpeng

最新推荐文章于 2024-09-12 23:23:34 发布

阅读量888

点赞数

本文链接：https://blog.csdn.net/vchenpeng/article/details/52435932

版权

伤感的学期末

今天是这学期的最后一天，考完了最后一门数学，明天我们就要各自为自己的暑假打算打算了，所以趁着大家还没走一起出去打了打篮球，玩了玩轮滑，很累但是很开心，最大的感触莫过于忧伤额，明年我或许不在学校了，或许见不到他们，明年大三名存实亡，挺失落的。晚上玩轮滑都还好，最大的糗事儿竟然是没保护好美女老乡，貌似摔得不轻额，希望她木有事儿吧，祈祷！！！

打字效果学习

经常看见一个蛮过瘾的Javascript打字效果，一直自己想写个玩玩，貌似总忘了，今天来玩哈，我写的是使用setTimeout来实现的，貌似大神都不是这么弄。

介绍介绍我的思路，给出一段需要打字的内容，然后使用substring函数每隔x毫秒就截取一次字符串，直至最后一次截获整个字符串停止。我这里使用的事setTimeout，其实我觉得吧这个东东就是一个循环，只是循环木有等待时间，也就是时间间隔，仅仅我个人看法，或许还木有理解透彻吧！

 1 <html>
 2 <head>
 3     <title></title>
 4     <script type="text/javascript">
 5         message = "上世纪60年代，根据柳残阳原著改编的粤语神怪武侠片《如来神掌》曾红极一时，由当时的巨星曹达华、于素秋扮演主角，整个系列曾先后拍摄5集，片中的“火云邪神”([柠檬]饰演)是主人公龙剑飞的师傅，也是绝技“如来神掌”的传人。后来，曾江、雪妮还续拍了《如来神掌再显神威》、《如来神掌劈魔平九派》，可见这套电影当时的热门程度。而到了1982年，邵氏还推出了新版《如来神掌》，万梓良在片中扮演的就是“火云邪神”。电视也曾两度拍摄《如来神掌》片集，第一套分别由于洋主演，後一套由张智霖主演。《如来神掌》《如来神掌》火云邪神的名字还被借用到漫画之中，黄玉郎从上世纪70年代开始连载的名著《龙虎门》中的大反派、日本罗刹教教主便叫“火云邪神”。1994年，《功夫》的武术指导袁和平还拍过一部《火云传奇》，林青霞扮演的角色也被称为“火云邪神”。可以说，火云邪神一词在香港武侠文化中占有不可忽视的地位。 "
 6         pos = 0     /*初始截字符的位置*/
 7         maxlength = message.length + 1
 8         function writemsg() {
 9             if (pos < maxlength) {
10                 txt = message.substring(pos, 0)
11                 document.forms[0].vito.value = txt
12                 document.forms[0].vito.style.color = '#00F'     /*设置打出来的字体样式*/
13                 timer = setTimeout("writemsg()", 50)    /*设置间隔50毫秒打一个字*/
14                 pos++
15             }
16         }
17 
18     </script>
19 </head>
20 <body>
21     <form action="">
22     <textarea rows="10" cols="160" id="vito"></textarea><br />
23     <input type="button" οnclick="writemsg()" value="开始" />
24     </form>
25 </body>
26 </html>

以上打字效果图如下图：

话说我真心不想用这个图的，我也想给博客园减负，木有办法，罪过

网上其他人的类似效果

 1 <html>
 2 <head>
 3     <title>Type Write</title>
 4     <style type="text/css">
 5         a
 6         {
 7             text-decoration: none;
 8         }
 9     </style>
10 </head>
11 <body>
12     <div id="newsticker">
13         <span id="tickertitle"></span><a id="typewriter" href="#"></a>
14     </div>
15 </body>
16 </html>
17 <script type="text/javascript">
18     var current = 0
19     var x = 0
20     var speed = 70
21     var speed2 = 2000
22     function initArray(n) {
23         this.length = n;
24         for (var i = 1; i <= n; i++) {
25             this[i] = ' '
26         }
27     }
28     typ = new initArray(16);
29     typ[0] = "406:red:Texas last in US Gov State Governors Websites (June 2008)";
30     typ[1] = "409:red:The Insolvency Service last in UK Central Government (June 2008)";
31     typ[2] = "384:green:Federated States of Micronesia 1st in US Gov State and Territorial Government Websites (April 2008)";
32     typ[3] = "413:green:U.S. Immigration and Customs Enforcement highest climber in US Gov Federal Agencies  (up 188) - June 2008";
33     typ[4] = "371:green:Iowa 1st in US Gov State Governors Websites (April 2008)";
34     typ[5] = "373:green:Directgov Jobs and Skills 1st in UK Central Government (April 2008)";
35     typ[6] = "379:red:Birmingham last in UK Local Government (April 2008)";
36     typ[7] = "406:green:Utah highest climber in US Gov State Governors Websites (up 16) - June 2008";
37     typ[8] = "380:red:Kent Police greatest faller in Police Forces (down 31) - April 2008";
38     function typewrite() {
39         var m = typ[current];
40         document.getElementById("typewriter").href = '/survey/report.html?rt=' + m.substring(0, m.indexOf(':'));
41         m = m.substring(m.indexOf(':') + 1);
42         document.getElementById("typewriter").style.color = m.substring(0, m.indexOf(':'));
43         m = m.substring(m.indexOf(':') + 1);
44         m = m.replace("&", "and");
45         document.getElementById("typewriter").innerHTML = m.substring(0, x++) + "_";
46 
47         if (x == m.length + 1) {
48             x = 0
49             current++
50             if (current > typ.length - 1) {
51                 current = 0
52             }
53             setTimeout("typewrite()", speed2)
54         }
55         else {
56             setTimeout("typewrite()", speed)
57         }
58     }
59     typewrite()  
60 </script>