小学习了下数组的知识,就做了个打字游戏效果练习下。
我也是菜鸟,可能很不优化,不过也是想让新手们一起学习下:
下面是全部代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <p id="text">今天是星期一。haha,你会打字吗?haha,错别字真多。</p> <input type="text" style="400px;" id="writen" /> <script type="text/javascript"> function $(id){return document.getElementById(id);} var text=$("text").innerHTML.split(""),textnew=$("text").innerHTML.split(""); function checkStr(){ var writen=$("writen").value.split(""); for(var i=0;i<writen.length;i++) { if(text[i]!=writen[i]) { textnew[i]="<span style=\"color:red;\">"+text[i]+"</span>"; $("text").innerHTML=textnew.join("").toString(); } else { textnew[i]="<span style=\"color:#9C0;\">"+text[i]+"</span>"; $("text").innerHTML=textnew.join("").toString(); } if(writen.length>text.length) { return; } } } $("writen").onkeyup=function(){ checkStr(); } </script> </body> </html>
效果如图: