首页 > 代码库 > 实现打字效果
实现打字效果
摘自一个表白网站的效果。
方法:
substr() 可在字符串中抽取从 第一个参数表示从指定的下标,第二个参数表示抽取指定数目的字符。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,两个参数,第一位指定的字符串,第二是开始检索的位置。
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
HTML
<div id="main"> <div id="content"> <div id="code"> <span class="col_3f7f5f">/**</span><br /> <span class="space"/><span class="col_3f7f5f">* I became a small company programmer,</span><br /> <span class="space"/><span class="col_3f7f5f">* So I want to wish you a happy birthday in a different way.</span><br /> <span class="space"/><span class="col_3f7f5f">*/</span><br /> Boy i = <span class="col_7f0055">new</span> Boy(<span class="col_2a36ff">"HeheWang"</span>);<br /> Girl u = <span class="col_7f0055">new</span> Girl(<span class="col_2a36ff">"BigBoss"</span>);<br /> <span class="col_3f7f5f">// February 20, 2015, I tell you to be my girlfriend. </span><br /> i.love(u);<br /> <span class="col_3f7f5f">// Forget your facial expression, may be surprised.</span><br /> <span class="col_3f7f5f">// Luckily, You took my girlfriend.</span><br /> u.agree(i);<br /> <span class="col_3f7f5f">// After, I miss u every day.</span><br /> i.miss(u);<br /> <span class="col_3f7f5f">// And care for u and our love.</span><br /> i.carefor(u);<br /> <span class="col_3f7f5f">// Until we start to quarrel.</span><br /> i.quarrel(u);<br /> <span class="col_3f7f5f">// Soon we‘ll be fine.</span><br /> fine(i,u);<br /> <span class="col_3f7f5f">// March 18th is your birthday.</span><br /> <span class="col_7f0055">number</span> days = <span class="col_7f0055">0</span>;<br /> <span class="col_7f0055">while</span> (days < 365) {<br /> <span class="ml_15"/>u happy;<br /> <span class="ml_15"/>days++<br /> <span class="ml_15"/><span class="col_3f7f5f">// I hope u can live a more meaningful life</span><br /> <span class="ml_15"/><span class="col_3f7f5f">// And healthy.</span><br /> }<br /> <span class="col_3f7f5f">// You say that you won‘t be so easy to marry me.</span><br /> <span class="col_3f7f5f">// So I will try my best to let you marry me.</span><br /> i tryhard();<br /> <span class="col_3f7f5f">// Until one day I can marry you.</span><br /> i.marry(u);<br /> i.liveHappilyWith(u);<br /> </div> </div> </div>
CSS
html,body{ height: 100%;}*{ margin: 0; padding: 0;}body{ font-size: 12px; background: #ffe; overflow: hidden;}#main{ width: 100%; height: 100%;}#content{ width: 1110px; height: auto; margin-left: 135.5px; overflow: hidden;}#code{ margin-top: 80px; float: left; width: 440px; height: 500px; color: #333; font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";}#code .space{ margin-left: 7px;}.col_3f7f5f{ color: #3f7f5f;}.col_7f0055{ color: #7f0055; font-weight: bold;}.col_2a36ff{ color: #2a36ff;}.ml_15{ margin-left: 15px;}
JS
<script src="http://www.mamicode.com/jquery.min.js"></script><script> $("#code").each (function() { var $ele = $(this), // $("#code") str = $ele.html(), // 先获取$("#code") 的html progress = 0; // 定义一个变量 $ele.html(‘‘); // 清空$("#code")的html // 定义一个定时器 var timer = setInterval(function() { // substr() 方法可在字符串中抽取从 第一个参数 下标开始的指定数目的字符。 var current = str.substr(progress, 1); // if (current == ‘<‘) { // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 // 两个参数,第一位指定的字符串,第二是开始检索的位置 progress = str.indexOf(‘>‘, progress) + 1; } else { progress++; } // substring() 方法用于提取字符串中介于两个指定下标之间的字符。 $ele.html(str.substring(0, progress) + (progress & 1 ? ‘_‘ : ‘‘)); // if (progress >= str.length) { clearInterval(timer); } }, 75); });</script>
上面的代码看起来有点乱,下面是个简单点的。
<body> <div class="contain"></div></body><script src="http://www.mamicode.com/jquery.min.js"></script><script> var str ="hello,word hello,word"; var strlen =str.length; var index =0; var con =$(".contain"); var boo =null; function start(){ boo =setInterval(function(){ con.append(str.charAt(index)); index++; if(index == strlen){ clearInterval(boo); } },100) } start();</script>
知识点:
charAt() 方法可返回指定位置的字符。返回的字符串长度为1。
实现打字效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。