JS打字效果-优快云博客

超级简单的原生js、计时器实现电脑打字效果

1.Demo展示：

Alt

2 . Html布局（超级简单）：

	<div class="copyright-typer"><p></p></div>

3. css样式表：

	*{
		padding:0;
		margin:0;
	}

	.copyright-typer{
		width:800px;
		height:150px;
		margin:60px auto;
		box-shadow:0 0 2px #ccc;
	}
	
	.copyright-typer p{
			text-indent:2em;	
			padding:20px;
			margin:0 auto;
			width:500px;
			font-size:18px;
			line-height:35px;
			font-weight:300;
			animation:show 10s .5s ease infinite;
		}

	@keyframes show{
		20%{color:#00FFFF;}
		40%{color:#00FF00;}
		50%{color:#0000CD;}
		60%{color:#7B68EE;}
		80%{color:#C71585;}
		100%{color:#8B0A50;}
	}

4. 原生js代码：


window.onload = function(){
	//需要输出的文字；
	var word ="相信我，人的潜能是可以挖掘的，当你说太晚的时候，一定要谨慎，它可能是你退却的借口。没有谁能阻止你成功，除了你自己。该炫自己的时候，千万别对自己手软！";

	var typer = document.querySelector(".copyright-typer");
	var p = typer.getElementsByTagName("p");

	var timer = null;
	var num = 0;
	
	function autoPlay(){
		timer = setInterval(function(){
			num++;
			if(num > word.length){
				num = 0;
				clearInterval(timer);
			}else{
				p[0].innerHTML = word.substring(0,num);
			}
		},200);
	}

	autoPlay();
}