js 打字机效果

作者: haibao 分类: 笔记 发布时间: 2014-08-15 11:50
以铜为镜, 可以正衣冠; 以史为镜, 可以知兴替; 以人为镜, 可以明得失。——李世民 (唐太宗)

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

源代码如下:

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 打字机效果],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

一条评论

发表评论

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

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>