效果就是这样 ---字体是慢慢出来的，跟打字机一样的
附上代码
<!doctype html>
<html>
<head>
<title>type write</title>
<style>
body {
background-color:lightcyan;
}
#code {
width:40%;
height:300px;
margin:50px auto;
}
span {
font-family:Arial;
color:blue;
font-weight:bold;
font-size:30px;
}
.ch{
font-family:Arial;
color:red;
}
</style>
</head>
<body>
<div id="code">
<span>Thank you for comforting me when I‘m sad</span>
<br />
<span class="ch">感谢你在我伤心时安慰我</span>
<br />
<span>Loving me when I‘m mad</span>
<br />
<span class="ch">当我生气时你护著我</span>
<br />
<span>Picking me up when I‘m down</span>
<br />
<span class="ch">当我沮丧时你拉拔我</span>
<br />
<span>Thank you for being my friend and being around</span>
<br />
<span class="ch">感谢你作我的朋友并且在我身旁</span>
<br />
<span>Teaching me the meaning of love</span>
<br />
<span class="ch">教导我爱的意义是什么</span>
<br />
<span>Encouraging me when I need a shove</span>
<br />
<span class="ch">当我需要动力时你鼓励我</span>
<br />
<span>But most of all thank you for</span>
<br />
<span class="ch">但我最想感谢你的是</span>
<br />
<span>Loving me for who I am</span>
<br />
<span class="ch">爱上像我这样的一个人</span>
</div>
<script>
function timer() {
var code = document.getElementById("code"), num = 0;
var codes = code.innerHTML
var timer = setInterval(function () {
var current = codes.substr(num, 1)
if (current == "<") { /*找到左括号后,马上去找右括号.*/
num = codes.indexOf(‘>‘, num)+1 ; /*匹配右括号*/
}
else {
num++;
}
code.innerHTML = codes.substring(0, num) + (num & 1 ? ‘‘ : ‘_‘);
if (num > codes.length) {
clearInterval(timer);
}
}, 75)
}
timer();
</script>
</body>
</html>
PS：小小记录一下。。
原文：http://www.cnblogs.com/long-ge/p/4157522.html