js字符输入效果

js字符输入效果

 

1.html

<div id="code" class="content">
	<p>相遇、相识、相知、相伴</p>
	<p>往后余生，请多指教</p>
</div>

2.js

var typewriter = function(e) {
	e.each(function() {
		var $ele = $(e),
			str = $ele.html(),
			progress = 0;
		$ele.html('');
		var timer = setInterval(function() {
			var current = str.substr(progress, 1);
			if (current == '<') {
				progress = str.indexOf('>', progress) + 1;
			} else {
				progress++;
			}
			$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
			if (progress >= str.length) {
				clearInterval(timer);
			}
		}, 200);
	});
	return e;
};

//调用
typewriter($("#code"))