实现打字效果

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

方法：

　　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;
}

<script src="jquery.min.js"></script>
<script>$("#code").each (function() {var $ele = $(this),  // $("#code")str = $ele.html(),   // 先获取$("#code") 的htmlprogress = 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="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>