前言

当我们设计官网的时候，肯定都是想要那种看起来很有点动画的，不是全静态的东西，动起来的东西才会更博人眼球，但是很多时候单纯的文字我们又不知道加什么动态的效果好，这时候就可以试试打字机啦，特别是循环打字机，打完一段可以删掉在打下一段，看起来确实是不错的效果呢！快来试试吧！

页面

<div class="text">
  <p>打字机循环打字 
  <span id="typingtext"></span>
  删除后打下一段文字.</p>
</div>

css
@keyframes blink {
    0% {
            opacity: 1;
    }
    25% {
            opacity: 0;
    }
    75% {
            opacity: 1;
    }
    100% {
            opacity: 1;
    }
}
.text{
    p{
      width: 500px;
      font-size: 46px;
      font-weight: 700;
      color: #333333;
      span{
        font-size: 46px;
        font-weight: 700;
        color: #5030C0;
      }
      /*文字打完后 等待的时间是没有光标的 用动画做一个假的光标*/
      span:after {
        content: "|";
        animation: blink 1s infinite;
        animation-timing-function: step-end;
      }
    }
}

关键代码

var typing = {
    el: document.getElementById("typingtext"),
    maxSpeed: 150,//最大输入速度 
    minSpeed: 50,//最小输入速度
    textList: [
        "马上国庆节啦", 
        "祝大家", 
        "国庆节快乐哦",
        "Happy Every day"
    ],//输入文字集合
    listIndex: 0,//列表的索引
    text: '',//当前显示的句子文字
    tempText: "",//临时句子截取文字
    indexes: 0,//光标索引
    delSpeed: 2,//删除文字速度
    cursorText: "|",//光标文字 
    wait: 2000,//文子输入完成后等待时间删除
    waitInput: 0,//等待n毫秒后开始输入
    timer: null,//定时器
    isStop: true,//是否停止
    cacheFun: null,//停止时函数记录
    
    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’的显示文字
    //等待的时候 变量hc为true 所以是不会显示光标的 所以css里面我自己给加了光标闪烁效果
        this.el.innerHTML/*innerText*/ = this.getNowText() + (hc ? "": this.cursorText);
    },
    
    backspace() { //循环删除
        if (typing.indexes > 0) {
            typing.waiting(typing.delSpeed).then(() => {//删除
                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.indexes ++; //设置下一次显示的文字索引               
            typing.render();//显示到页面
            typing.waiting(typing.getRanSpeed()).then(typing.loop);//等待删除
        }
    },
    
    start() {//开始 
        typing.backspace();
    }
};
//测试
typing.start();

总结

注释写的非常详细都在里面了，可以结合gif看代码，快写起来吧！