js 打字机效果
以铜为镜, 可以正衣冠; 以史为镜, 可以知兴替; 以人为镜, 可以明得失。——李世民 (唐太宗)
今天看到有人需要打字机效果，我也没写过，正好练练手看看，防止以后也会用到，于是便抽了时间写了一下打字机效果，记录一下：
源代码如下：
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> |
微距
2016/02/29 下午 6:10
1234567890