js 打字机效果
本文最后更新于2014-08-15，已超过 1年没有更新，如果文章内容、图片或者下载资源失效，请留言反馈，我会及时处理，谢谢！
历史上的今天：10月20日 - 1962年，中印边境自卫反击战爆发
周六下午好， 本文除去代码部分，共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> |
上一篇：css3 笔记(转)
微距 - 未知操作系统 | 未知浏览器
2016-02-29 18:10
1234567890