• 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,哥睡不着额,怎麽办怎麽拌,明天白天注定又困,伤不起。。。。

  • 相关阅读:
    【转】 cin、cin.get()、cin.getline()、getline()、gets()等函数的用法
    HDU How many prime numbers
    《大学ACM的总结 》(转载)
    POJ 最小公倍数
    HDU 开门人和关门人
    HDU shǎ崽 OrOrOrOrz
    HDU Saving HDU 2111
    HDU 1106 排序
    strtok函数()
    HDU 2187汶川地震
  • 原文地址:https://www.cnblogs.com/vchenpeng/p/3172929.html
Copyright © 2020-2023  润新知