JS实现动态打字效果

动态打字效果

核心利用字符串方法 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)
}

效果实现