js之打字效果

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;             // 返回一个类
    }  
};




你可能感兴趣的:(js之打字效果)