Javascript实现打字效果

伤感的 学期末

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

打字效果学习

经常看见一个蛮过瘾的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" onclick="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>
View Code

这个是我下的,效果就不演示了,gif太大,园子空间伤不起。

夜深人静404

今天就写到这里吧,貌似写的不咋地,希望对你有用吧。夜深人静,Bigod还在Dota,哥睡不着额,怎麽办怎麽拌,明天白天注定又困,伤不起。。。。

原文地址:https://www.cnblogs.com/vchenpeng/p/3172929.html