zoukankan      html  css  js  c++  java
  • 几段javascript实现一个打字游戏效果

    小学习了下数组的知识,就做了个打字游戏效果练习下。

    我也是菜鸟,可能很不优化,不过也是想让新手们一起学习下:

    下面是全部代码:

    <!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>
    

     效果如图:

  • 相关阅读:
    复利计算器2.01
    复利计算器2.0
    0429团队3.0
    0428 团队项目合作2.0作业
    "数学口袋精灵"bug
    操作系统-实验2
    博客评论
    复利计算升级
    0408 结对合作
    0406复利计算5.0
  • 原文地址:https://www.cnblogs.com/jq520/p/2658760.html
Copyright © 2011-2022 走看看