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

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

代码类似于这样:

<div id="demo"></div>
<script>
    var typing = {
        _el: document.getElementById("demo"),
        _maxSpeed: 150,//最大输入速度 
        _minSpeed: 20,//最小输入速度
        _textList: ["js实现简单的循环打字效果(思路分享)", 
            "关爱单身狗成长协会 ", 
            "简书地址:https://www.jianshu.com/u/f19e29243ff6",
            "weibo:https://weibo.com/bay12580"
        ],//输入文字集合
        _listIndex: 0,//列表的索引
        _text: '',//当前显示的句子文字
        _tempText: "",//临时句子截取文字
        _indexes: 0,//光标索引
        _delSpeed: 10,//删除文字速度
        _cursorText: "_",//光标文字 
        _wait: 2000,//文子输入完成后等待时间删除
        _waitInput: 800,//等待n毫秒后开始输入
        _timer: null,//定时器
        _isStop: true,//是否停止
        _cacheFun: null,//停止时函数记录
    };
</script>

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

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.实现不断打字效果

<div id="demo"></div>
<script>
    var typing = {
         //略......
        loop() { //循环显示
            if (typing._text.length <= typing._indexes) {//是显示完成 
                typing.render(true);//输出完成 隐藏结尾的光标
            } else {
                typing.getNowText(typing._indexes + 1);//设置下一次显示的文字
                typing.render();//显示到页面
                typing.waiting(typing.getRanSpeed()).then(typing.loop);//等待删除
            }
        },
        start(){//开始 
            typing._text = typing._textList[typing._listIndex];//获取应该显示的文字
            typing.waiting(typing._waitInput).then(typing.loop);//等等开始
           //typing.loop();//你也可以立即开始
        }
    };
    //测试
    typing.start();
</script>

效果:

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

<div id="demo"></div>
<script>
    var typing = {
        //略.........
        backspace() { //循环删除
            if (typing._indexes > 0) {
                typing.waiting(typing._delSpeed).then(() => {//删除
                    // typing.getNowText(typing._indexes -1);
                    typing._indexes --;
                    typing.render();
                    typing.backspace();
                });
            } else {//删除完成
                if (typing._listIndex >= typing._textList.length) typing._listIndex = 0;
                typing._text = typing._textList[typing._listIndex];
                typing._listIndex++;
                typing.waiting(typing._waitInput).then(typing.loop);//等待输入
            }
        },
        loop() {
            if (typing._text.length <= typing._indexes) {//是显示完成 
                typing.render(true);//输出完成 
                typing.waiting(typing._wait).then(typing.backspace);//等待删除
            } else {
                // typing.getNowText(typing._indexes + 1);
                typing._indexes ++; //设置下一次显示的文字索引               
                typing.render();//显示到页面
                typing.waiting(typing.getRanSpeed()).then(typing.loop);//等待删除
            }
        },
        start() {//开始 
            typing.backspace();
        }
    };
    //测试
    typing.start();
</script>

效果:

5.添加暂停功能

<div id="demo"></div>
<script>
    var typing = {
        //略......
        backspace() {
            if (typing._isStop) return typing._cacheFun = typing.backspace;
             //略......
        },
        loop() {
            if (typing._isStop) return typing._cacheFun = typing.loop;//记录当前显示
            //略......
        },
        start() {
            if (!typing._isStop) return;//处于运行状态
            typing._isStop = false;
            if (typing._cacheFun) {//继续上次未完成函数
                typing._cacheFun();
                typing._cacheFun = null;
                return;
            }
            typing.render("");
            typing.cleanTimer();
            typing.backspace();
        },
        restart() {
            typing.stop();
            typing._tempText = "";
            typing._listIndex = 0;
            typing._indexes = 0;
            typing.render("");
            typing._cacheFun = null;
            typing.waiting(typing._wait).then(typing.start);//以最长时间延时来确保执行完全停止
        },
        stop() {
            if (typing._isStop) return;
            typing._isStop = true;
            typing.cleanTimer();
        }
    }; 
    typing.start();
</script>
<button onclick="typing.start()">开始</button>
<button onclick="typing.stop()">暂停</button>
<button onclick="typing.restart()">重新开始</button>

效果:

在线查看效果