js 打字机效果

A^-A⁺

haibao 2014-08-15 1 1 904 百度已收录前端开发

本文最后更新于2014-08-15，已超过 1年没有更新，如果文章内容、图片或者下载资源失效，请留言反馈，我会及时处理，谢谢！

温馨提示：本文共674个字，读完预计2分钟。

今天看到有人需要打字机效果，我也没写过，正好练练手看看，防止以后也会用到，于是便抽了时间写了一下打字机效果，记录一下：

源代码如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>demo</title>
         <style>
         .conbox{width:840px;margin:20px auto auto;overflow:hidden;}
         .box{ width:400px; height:300px; float:left; border:1px solid red;padding:10px;}
         #clone{ border:1px solid #339; }
  </style>
</head>
<body>
<div class="conbox">
<div id="content" class="box">1.本站是一个以互联网新鲜资讯为核心，兼有生活情感、唯美杂谈、摄影、图片、音乐灯光内容的互联网 资讯博客，旨在与您分享生活中、互联网中的唯美文字，图片，音乐，创意，新鲜事！ 2.站长是一位狂热的互联网和前端工程师，同时喜欢设计，热爱生活。现在是一名IT民工，表面冷漠的 挨踢男，其实内心略显文艺和犯二，同时很热情。看上去很懒，其实是个完美主义者和好强的人。看似成 熟，其实有时候很幼稚，很傻。</div>
<div id="clone" class="box"></div>
</div>
<script type="text/javascript">// <![CDATA[
var prints = function ( target,str ,speed){ 	     var timer = null; 	     var count = 0; 	     timer = setInterval(function(){ 		   if( count >= str.length ){ 
		  	 clearInterval(timer); 
		   }
		   else{
			 target.innerHTML = str.substring( 0,count );
			 count++;  
		   }
		 },speed)
     };
 
     var c1 = document.getElementById("clone");
     var c2 = document.getElementById('content');
     var str  = c2.innerHTML;
     setTimeout(function(){
	    prints( c1 ,str, 100 );
     },200);
// ]]></script>
</body>
</html>