首页 > 代码库 > 实现打字效果

实现打字效果

摘自一个表白网站的效果。

方法:

  substr() 可在字符串中抽取从 第一个参数表示从指定的下标,第二个参数表示抽取指定数目的字符。

  indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,两个参数,第一位指定的字符串,第二是开始检索的位置。

  substring() 方法用于提取字符串中介于两个指定下标之间的字符。

HTML

<div id="main">        <div id="content">            <div id="code">                <span class="col_3f7f5f">/**</span><br />                <span class="space"/><span class="col_3f7f5f">* I became a small company programmer,</span><br />                <span class="space"/><span class="col_3f7f5f">* So I want to wish you a happy birthday in a different way.</span><br />                <span class="space"/><span class="col_3f7f5f">*/</span><br />                Boy i = <span class="col_7f0055">new</span> Boy(<span class="col_2a36ff">"HeheWang"</span>);<br />                Girl u = <span class="col_7f0055">new</span> Girl(<span class="col_2a36ff">"BigBoss"</span>);<br />                <span class="col_3f7f5f">// February 20, 2015, I tell you to be my girlfriend. </span><br />                i.love(u);<br />                <span class="col_3f7f5f">// Forget your facial expression, may be surprised.</span><br />                <span class="col_3f7f5f">// Luckily, You took my girlfriend.</span><br />                u.agree(i);<br />                <span class="col_3f7f5f">// After, I miss u every day.</span><br />                i.miss(u);<br />                <span class="col_3f7f5f">// And care for u and our love.</span><br />                i.carefor(u);<br />                <span class="col_3f7f5f">// Until we start to quarrel.</span><br />                i.quarrel(u);<br />                <span class="col_3f7f5f">// Soon we‘ll be fine.</span><br />                fine(i,u);<br />                <span class="col_3f7f5f">// March 18th is your birthday.</span><br />                <span class="col_7f0055">number</span> days = <span class="col_7f0055">0</span>;<br />                <span class="col_7f0055">while</span> (days < 365) {<br />                <span class="ml_15"/>u happy;<br />                <span class="ml_15"/>days++<br />                <span class="ml_15"/><span class="col_3f7f5f">// I hope u can live a more meaningful life</span><br />                <span class="ml_15"/><span class="col_3f7f5f">// And healthy.</span><br />                }<br />                <span class="col_3f7f5f">// You say that you won‘t be so easy to marry me.</span><br />                <span class="col_3f7f5f">// So I will try my best to let you marry me.</span><br />                i tryhard();<br />                <span class="col_3f7f5f">// Until one day I can marry you.</span><br />                i.marry(u);<br />                i.liveHappilyWith(u);<br />            </div>        </div>    </div>

 

CSS

html,body{    height: 100%;}*{    margin: 0;    padding: 0;}body{    font-size: 12px;    background: #ffe;    overflow: hidden;}#main{    width: 100%;    height: 100%;}#content{    width: 1110px;    height: auto;    margin-left: 135.5px;    overflow: hidden;}#code{    margin-top: 80px;    float: left;    width: 440px;    height: 500px;    color: #333;    font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";}#code .space{    margin-left: 7px;}.col_3f7f5f{    color: #3f7f5f;}.col_7f0055{    color: #7f0055;    font-weight: bold;}.col_2a36ff{    color: #2a36ff;}.ml_15{    margin-left: 15px;}

 

JS

<script src="http://www.mamicode.com/jquery.min.js"></script><script>    $("#code").each (function() {        var $ele = $(this),  // $("#code")        str = $ele.html(),   // 先获取$("#code") 的html        progress = 0;        // 定义一个变量        $ele.html(‘‘);        // 清空$("#code")的html        // 定义一个定时器        var timer = setInterval(function() {            // substr() 方法可在字符串中抽取从 第一个参数 下标开始的指定数目的字符。            var current = str.substr(progress, 1);    //            if (current == ‘<‘) {                // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。                // 两个参数,第一位指定的字符串,第二是开始检索的位置                progress = str.indexOf(‘>‘, progress) + 1;            } else {                progress++;            }            // substring() 方法用于提取字符串中介于两个指定下标之间的字符。            $ele.html(str.substring(0, progress) + (progress & 1 ? ‘_‘ : ‘‘));            //             if (progress >= str.length) {                clearInterval(timer);            }        }, 75);    });</script>

 

上面的代码看起来有点乱,下面是个简单点的。

<body>    <div class="contain"></div></body><script src="http://www.mamicode.com/jquery.min.js"></script><script>    var str ="hello,word hello,word";    var strlen =str.length;    var index =0;    var con =$(".contain");    var boo =null;    function start(){        boo =setInterval(function(){            con.append(str.charAt(index));            index++;            if(index == strlen){                clearInterval(boo);            }        },100)    }    start();</script>

 

知识点:

  charAt() 方法可返回指定位置的字符。返回的字符串长度为1。

 

实现打字效果