js之打字效果

最新推荐文章于 2024-01-10 23:28:33 发布

转载最新推荐文章于 2024-01-10 23:28:33 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/cobish/blog/303786

文章标签：

#javascript #ViewUI

本文介绍了使用JavaScript实现打字效果的三种方法：直接使用定时器、通过函数简化代码以及采用面向对象的方式。每种方法都有详细的代码示例。

为什么80%的码农都做不了架构师？>>>

1、打字的效果原理：利用定时器对某个标签里的文字进行更换，看起来就像是在打字一样，比如：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>js打字效果</title>
</head>
<body>
    <h1 id="typeMsg"></h1>
    <script type="text/javascript">
    var msg1 = "我";
    var msg2 = "我正";
    var msg3 = "我正在";
    var msg4 = "我正在打";
    var msg5 = "我正在打字";
    var underline = "_";
    var typeMsg = document.getElementById('typeMsg');

    var txt = msg1 + underline;
    setTimeout(function() {
        typeMsg.innerHTML = txt;
    }, 200);

    setTimeout(function() {
        txt = msg2 + underline;
        typeMsg.innerHTML = txt;
    }, 400);

    setTimeout(function() {
        txt = msg3 + underline;
        typeMsg.innerHTML = txt;
    }, 600);

    setTimeout(function() {
        txt = msg4 + underline;
        typeMsg.innerHTML = txt;
    }, 800);

    setTimeout(function() {
        txt = msg5;
        typeMsg.innerHTML = txt;
    }, 1000);

    </script>
</body>
</html>

2、可以看到我们实现的效果了吧，但是，上面的代码太多的重复了，于是我们把js代码修改一下：

var msg5 = "我正在打字";  // 将要打印出的文字
var txt;                  // 显示在标签上的文字 
var i = 0;                // 索引，记录已输出多少字符 
var len = msg5.length;    // 打印的文字长度
var timer = null;         // 定时器

function type() {
    txt = msg5.substr(0, i) + underline;    // 本次输出的字符
    typeMsg.innerHTML = txt;                // 标签对象显示文字
    timer = setTimeout("type()", 200);      // 设置定时器，递归调用自己方法
    if (i == len - 1) { underline = ""; }   // 去掉下划线
    if (i == len) { clearTimeout(timer); }  // 去除定时器
    i++;                                    // 索引+1
}

3、是不是简单了点，但我觉得不够面向对象，于是试了下用定义类的方式去实现

js定义一个类：http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html
开始我用了 Object.create() 方法，后来发现它不支持低版本的ie浏览器，就选用了第三种的极简主义法
html代码跟上面的还是一致，只是js代码修改了而已

// onload
window.onload = function(){
	var type = Type.createNew();                       // 初始化一个type类
    var typeMsg = document.getElementById('typeMsg');  // 取得一个html标签对象
	type.tag = typeMsg;                                // 标签对象赋值
	type.typing();                                     // 打字
};

// 打字类
var Type = {　　　　
    createNew: function() {　　　　　　
        var type = {};                 // 定义一个类

        // 成员变量
        type.message   = '我正在打字'; // 将要打印出的文字
        type.underline = '_';          // 下划线，显示在文字后面
        type.indexs    = 0;            // 索引，记录已输出多少字符
        type.tag       = null;         // 显示文字的html标签对象
        type.timer     = null;         // 定时器
        type.speed     = 200           // 定时器时间

        // 成员方法　　
        type.length    = function(){   // 获取打印的文字长度
        	return type.message.length;
        };　　　
        type.typing    = function(){                                                    // 打字
        	type.timer = setTimeout(function(){type.typing();}, type.speed);            // 设置定时器，递归调用自己方法
        	type.tag.innerHTML = type.message.substr(0, type.indexs) + type.underline;  // 标签对象显示文字
        	if (type.indexs == type.length()-1) { type.underline = ""; };               // 去掉下划线
        	if (type.indexs == type.length()) { clearTimeout(type.timer); };            // 去除定时器
        	type.indexs++;                                                              // 索引+1
        };

        return type;　　　　　　       // 返回一个类
    }　　
};

转载于:https://my.oschina.net/cobish/blog/303786