javascript实现打字效果

为了网站的效果好看，设计有时候会希望想要让某一句话采用打字展现出来的效果。 如下图效果图所示：

如何在网站上加上这样的效果，有三种方式：

• 做gif动图，网站上直接引入效果动图。（不推荐，需要ui同学做gif图，且文字内容不可随意改变）
• javascript方式实现。
• canvas方式。

javascript和canvas方式二选一，都可以非常好的实现该效果。 本文使用javascript

实现思路

1. 获取目标元素，获取目标元素的文字内容
2. 判断当前打印显示的文字内容是否与元文字内容相同。
3. 使用substring()对元文字内容进行截取进行打印显示
4. 把打字的速度比删除的速度快。

核心方法

//实现效果的核心方法 字符串的substring()
if(!this.pause){
    this.txt = this.printTxt.substring(0,this.txt.length+1);
}else{
    this.txt = this.printTxt.substring(0,this.txt.length-1);
}

完整代码

var PrintTxt = function(el,printTxt){
    this.el = el;   //目标元素
    this.printTxt = printTxt;   //目标内容
    this.txt = "";  //打字效果显现内容
    this.pause = false; //目标内容是否全部打印完毕
    this.time = 200;    //打字速度
    this.tick();
}

PrintTxt.prototype.tick = function(){

    if(!this.pause){
        this.txt = this.printTxt.substring(0,this.txt.length+1);
    }else{
        this.txt = this.printTxt.substring(0,this.txt.length-1);
    }

    this.el.innerHTML = '<span>'+this.txt+'</span>';
    var that = this;

    if(!this.pause && this.txt === this.printTxt){
        this.pause = true
        this.time = 100
    }else if(this.pause && this.txt === ""){
        this.pause = false
        this.time = 200
    }
    setTimeout(function(){
        that.tick();
    },this.time)
}

window.onload = function(){
    var element = document.getElementById('write');
    var txtStr = element.innerHTML;

    new PrintTxt(element,txtStr)
}