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)。。。

优质内容筛选与推荐>>
1、Type mytableview does not confirm to portocol UITableViewDataResource
2、ci output
3、解决:ERROR: Cannot launch Jack server
4、文件上传细节处理
5、VS2010程序打包操作--超详细


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号