JS实现的打字机效果完整实例

本文实例讲述了JS实现的打字机效果。分享给大家供大家参考，具体如下：

<！DOCTYPE html><html lang="en"><head><meta charset="utf-8"><！-- Always force latest IE rendering engine （even in intranet） & Chrome FrameRemove this if you use the .htaccess --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>JS打字机效果</title><meta name="description" content=""><meta name="author" content="Administrator"><meta name="viewport" content="width=device-width; initial-scale=1.0"><！-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --><style type = "text/css"> #main {width: 80%;height: 750px;margin: auto;padding: 10px;background: #cfe1ca;border: 10px outset #f9c6aa;line-height: 30px;color: #9f3c61;font-size: 18px; } p {text-indent: 30px; }</style><script type = "text/javascript"> var typeWriter = {msg: function（msg）{ return msg;},len: function（）{ return this.msg.length;},seq: 0,speed: 150,//打字时间（ms）type: function（）{ var _this = this; document.getElementById（"main"）.innerHTML = _this.msg.substring（0, _this.seq）; if （_this.seq == _this.len（）） {_this.seq = 0; clearTimeout（t）; } else {_this.seq++;var t = setTimeout（function（）{_this.type（）}, this.speed）; }} } window.onload = function（）{alert（"welcome to http://www.jb51.net"）var msg = "JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可";function getMsg（）{ return msg;}typeWriter.msg = getMsg（msg）;typeWriter.type（）; }</script> </head> <body><div id = "main"> </div> </body></html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。