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

2019-11-20 09:39:15

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame    Remove 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 //www.VeVB.COm")    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程序设计有所帮助。

上一篇：javascript事件冒泡简单示例

下一篇：jQuery实现的网格线绘制方法