利用js实现一个动态打字的效果

最近看到一个网站很有意思，首屏的一段文字不想让其直接显示出来，而是模拟打字的过程，一个字一个字的出现。其实这个效果非常好做，利用定时器和字符串，遍历字符串的索引，将字符写入页面即可，先来看一下效果吧：

因为功能比较简单，并且使主要通过js实现的，我在这里只展示js的代码
JavaScript：

window.onload = function(){
	// 获取div节点的dom对象
	var divNode = document.querySelector('div');
	// 需要写入页面的字符串，这里的字符内容就是待会要写入网页的内容
	var codingStr = "Hello,这里是小邢笔记";
	// 字符串索引
	var j = 0;
	// 创建循环定时器，通过循环定时器每200毫米执行里面的回调函数
	var coding = setInterval(function(){
		// slice()方法是截取字符串指定位置的方法
		// 第一个参数是起始位置的索引，第二个参数是结束位置的索引（不包含结束位置）
		// 最后返回的就是截取的字串
		// 最后是模拟光标的效果
		divNode.innerHTML = codingStr.slice(0,j) + '_';
		j++;
		// 如果索引大于了字符串的长度，把最后的光标删除并清除计时器
		if(j > codingStr.length){
			divNode.innerHTML = codingStr.slice(0,j);
			clearInterval(coding);
		}
	},200)
}

如果对您有帮助的话，记得给个赞哦