javascript打字机效果 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript打字机效果</title>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:50px;background:#181818;}
#display{padding:10px;width:500px;height:200px;background:#666;font:14px/28px verdana;text-indent:2em;color:#eee;}
</style>
<script type="text/javascript">
var i = 0;
var str = "对于一个网页制作者来说，对HTML语言一定不会感到陌生，因为HTML语言是所有网页制作的基础。但是如果页面能够方便网友们的使用，友好而大方，甚至像桌面应用程序一样，那么仅仅依靠HTML语言是不够的，JavaScript在这其中扮演着重要的角色。";
window.onload = function typing(){
    var mydiv = document.getElementById("display");
    mydiv.innerHTML += str.charAt(i);
    i++;
    var id = setTimeout(typing,30);
    if(i==str.length){
        clearTimeout(id);
        //alert("程序执行完毕！");
    }
}
</script>
</head>
<body>
<div id="display"></div>
</body>
</html>

 呵呵，感觉蛮有趣的，其实字并不是一个个"打"出来的，而是通过charAt不断获取加上去的，在typing里用setTimeout不断调用其自身，每执行一次i就加1，if(i==字符串的长度)，clearTimeout(timeoutID)。。。

posted @ 2012-09-04 12:09  evilfox  阅读(617)  评论(0)  编辑  收藏  举报