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()
