标签:des style blog http io ar color os sp
效果就是这样 ---字体是慢慢出来的,跟打字机一样的
附上代码
<!doctype html> <html> <head> <title>type write</title> <style> body { background-color:lightcyan; } #code { width:40%; height:300px; margin:50px auto; } span { font-family:Arial; color:blue; font-weight:bold; font-size:30px; } .ch{ font-family:Arial; color:red; } </style> </head> <body> <div id="code"> <span>Thank you for comforting me when I‘m sad</span> <br /> <span class="ch">感谢你在我伤心时安慰我</span> <br /> <span>Loving me when I‘m mad</span> <br /> <span class="ch">当我生气时你护著我</span> <br /> <span>Picking me up when I‘m down</span> <br /> <span class="ch">当我沮丧时你拉拔我</span> <br /> <span>Thank you for being my friend and being around</span> <br /> <span class="ch">感谢你作我的朋友并且在我身旁</span> <br /> <span>Teaching me the meaning of love</span> <br /> <span class="ch">教导我爱的意义是什么</span> <br /> <span>Encouraging me when I need a shove</span> <br /> <span class="ch">当我需要动力时你鼓励我</span> <br /> <span>But most of all thank you for</span> <br /> <span class="ch">但我最想感谢你的是</span> <br /> <span>Loving me for who I am</span> <br /> <span class="ch">爱上像我这样的一个人</span> </div> <script> function timer() { var code = document.getElementById("code"), num = 0; var codes = code.innerHTML var timer = setInterval(function () { var current = codes.substr(num, 1) if (current == "<") { /*找到左括号后,马上去找右括号.*/ num = codes.indexOf(‘>‘, num)+1 ; /*匹配右括号*/ } else { num++; } code.innerHTML = codes.substring(0, num) + (num & 1 ? ‘‘ : ‘_‘); if (num > codes.length) { clearInterval(timer); } }, 75) } timer(); </script> </body> </html>
PS:小小记录一下。。
标签:des style blog http io ar color os sp
原文地址:http://www.cnblogs.com/long-ge/p/4157522.html