震惊JS网页打字机只需要20行
废话不多说直接上代码
//获取需要输入的元素
let node = document.querySelector('span')
let textArr = ['静女其姝,俟我于城隅。爱而不见,搔首踟蹰','哎呦!你干嘛!',"只愿君心似我心,定不负相思意。双向奔赴的爱情,最令人向往。"],index = 0,tempText = "",timer = null;
const getTime = () =>{
return Math.floor(Math.random()*10+1)
}
//添加字
const addText = () =>{
tempText = textArr[index].slice(0,tempText.length+1)
node.innerHTML = tempText
if(tempText.length == textArr[index].length){
clearInterval(timer)
timer = setInterval(clearText,100)
}
}
//清除字
const clearText = () =>{
tempText = textArr[index].slice(0,tempText.length-1)
node.innerHTML = tempText
if(tempText.length == 0){
clearInterval(timer)
index++
if(index>textArr.length-1){
index = 0
}
timer = setInterval(addText,50*getTime())
}
}
timer = setInterval(addText,100)