本文最后更新于2014-08-15,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
温馨提示:本文共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> |
1234567890