js实现简单的循环打字效果(思路分享)

1.初始化"打字创建"属性

代码类似于这样:

其实属性也不难理解,这里就不详细说明了~~

2.几个基本函数

//略....
var typing = {
        //略.......
        cleanTimer() {//清除定时器
            if (this._timer) return;
            clearTimeout(this._timer);
            this._timer = null;
        },
        getRanSpeed() {//获取随机停止时间
            return Math.floor(Math.random() * (this._maxSpeed - this._minSpeed + 1)) + this._minSpeed;
        },
        getNowText(i) {//设置并获取当前文字
            this._indexes = typeof i == "number" ? i : this._indexes;
            this._tempText = this._text.substr(0, this._indexes);
            return this._tempText;
        },
        waiting(ms) {//等待函数
            return new Promise((resolve, reject) => {
                typing.cleanTimer();
                typing._timer = setTimeout(resolve, ms);
            })
        },
        render(hc) {//设置 ‘_el’的显示文字
            this._el.innerHTML/*innerText*/ = this.getNowText() + (hc ? "" : this._cursorText);
        }
    };
//略....

函数测试:

//测试
typing._text = typing._textList[typing._listIndex]; 
typing.render();//一开始显示 typing._cursorText 对应字符
typing.waiting(typing._waitInput).then(()=>{//等待 typing._waitInput 毫秒后开始显示文字
    typing._indexes ++;
    typing.render();
}); 

效果:

3.实现不断打字效果

效果:

4.实现不断打字与删除效果

效果:

5.添加暂停功能

开始
暂停
重新开始

效果:

在线查看效果