动态打字效果
核心利用字符串方法 charAt() 并借助定时器实现
具体步骤
html
<div id="text" style="color: #fff;font-size: 2em">
js
let text = document.getElementById('text') // 输出的节点
let num = 0 // 输出的初始索引
let string = "在成长的岁月中,曾经陪你笑陪你愁的朋友,是一辈子都不会忘记的。愿彼此都能珍惜这份友谊,做个永远的朋友。 ";
show()
function show() {
text.innerHTML = string.charAt(num) // 首次赋值
let timer = setInterval(() => {
num ++
text.innerHTML += string.charAt(num) // 利用charAt(num)索引赋值
if (num == string.length) {
clearInterval(timer) // 赋值完毕,清除定时器
// 如果想重新执行
setTimeout(() => {
text.innerHTML = ''
num = 0
show()
},1000)
}
},200)
}
效果实现