震惊JS网页打字机只需要20行

208 阅读1分钟

震惊JS网页打字机只需要20行

QQ录屏20230112112915.gif 废话不多说直接上代码

            //获取需要输入的元素
		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)