js 打字机效果

haibao 笔记 2014-08-15 11:50 565
一个人的价值, 在于他贡献了什么, 而不在于他获得了什么。——爱因斯坦

凌晨好, 本文除去代码部分,共674个字,预计阅读时间需要2分钟。

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

源代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>

本文标题:js 打字机效果

本文地址:http://www.hehaibao.com/js-print/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

一条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注