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

来源：动视网责编：小采时间：2020-11-27 20:25:39

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

JS实现的打字机效果完整实例:本文实例讲述了JS实现的打字机效果。分享给大家供大家参考，具体如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering en

推荐度：

点击下载本文 文档为doc格式

导读JS实现的打字机效果完整实例:本文实例讲述了JS实现的打字机效果。分享给大家供大家参考，具体如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering en

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

<!DOCTYPE html>
<html>
 <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 http://www.gxlcms.com")
 var msg = "JS打字机效果 ，原理很简单：每次多获取一个待打出的字符串的值，

输出，覆盖原来输出的内容即可"; function getMsg(){ return msg; } typeWriter.msg = getMsg(msg); typeWriter.type(); } </script> </head> <body> <div id = "main"> </div> </body> </html>

希望本文所述对大家JavaScript程序设计有所帮助。

更多JS实现的打字机效果完整实例相关文章请关注PHP中文网！

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

推荐度：

点击下载本文 文档为doc格式

标签：实例打字效果打字机效果

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐