js打字

html部分

<div class="typing">
    <h2 class="header-sub-title" id="word"></h2>
</div>

js部分:

// typing
const words = [
    '1111111111111111111111',
    '2222222222222',
    '33333333333333',
    '4444444444444444444',
    '555555',
    '66666666666',
    '7777777777777777777777777',
    '888888888888888888',
]
let i = 0
let timer
// speed in ms
// 生成之后到删除的停留时间
let deleteDelay = 3000
// 打字间隔时间
let typeSpeed = 100
// 删字间隔时间
let delSpeed = 50

// 生成回路
function typingEffect() {
    let word = words[i].split('')
    var loopTyping = function () {
        if (word.length > 0) {
            document.getElementById('word').innerHTML += word.shift()
        } else {
            delay(function () {
                deletingEffect() // do stuff
            }, deleteDelay) // end delay
            // deletingEffect();
            return false
        }
        timer = setTimeout(loopTyping, typeSpeed)
    }
    loopTyping()
}

// 删除回路
function deletingEffect() {
    let word = words[i].split('')
    var loopDeleting = function () {
        if (word.length > 0) {
            word.pop()
            document.getElementById('word').innerHTML = word.join('')
        } else {
            if (words.length > i + 1) {
                i++
            }
            // else {
            //   i = 0;
            // }
            typingEffect()
            return false
        }

        timer = setTimeout(loopDeleting, delSpeed)
    }

    loopDeleting()
}

var delay = (function () {
    var timer = 0
    return function (callback, ms) {
        clearTimeout(timer)
        timer = setTimeout(callback, ms)
    }
})()

typingEffect()