JS实现打字效果

 1.效果

今天利用摸鱼时间玩了一下js实现打字效果，经过多次打磨，我把多个参数抽离出来，用一个对象传进去，废话不多说，看效果。

2.使用

typed({
	"el":'.box2',//显示文字的节点
	"newsArr": ["12345，",'上山打老虎'],//打字输出的内容
	"loop":true,//是否循环
	"newsTime":1000,//每条信息完整出现后停留时间
	"textTime":500,//每条信息中的字出现的间隔时间
	"newsIndex":1,//从某一条消息打印
	txtIndex:2//从一条消息中的某一个字开始打印
})

3. 实现代码

function typed(options) {

	var newsTime = options.newsTime || 2000; //每条信息完整出现后停留时间
	var textTime = options.textTime || 200; //每条信息中的字出现的间隔时间   
	var newsIndex = options.newsIndex || 0;
	var txtIndex = options.txtIndex || 0;
	var txtTimer; //调用setInterval的返回值，用于取消对函数的周期性执行
	var newsTimer;
	var newsArr = options.newsArr; //显示在网页上的文字内容和对应的链接 
	var loop = options.loop;

	shownew();

	function shownew() {
		newStr = newsArr[newsIndex]; //通过newsi传递，依次显示数组中的内容
		if (txtIndex >= newStr.length) {
			clearInterval(txtTimer); //一旦超过要显示的文字长度，清除对shownew()的周期性调用
			clearInterval(newsTimer);
			newsIndex++; //显示数组中的下一个
			if (newsIndex >= newsArr.length) {
				if(loop){
					newsIndex = 0; //当newsi大于信息标题的数量时，把newsi清零，重新从第一个显示
				}else{
					return false
				}
			}
			newsTimer = setInterval(shownew, newsTime); //间隔2000ms后重新调用shownew()
			txtIndex = 0;
			return;
		}
		clearInterval(txtTimer);
		document.querySelector(options.el).innerHTML = newStr.substring(0, txtIndex + 1); //截取字符，从第一个字符到txti+1个字符     
		txtIndex++; //文字一个个出现
		txtTimer = setInterval(shownew, textTime);
	}

}