js兑现猜数字游戏-JavaSript-爱易网页

js兑现猜数字游戏

日期：2014-05-16　浏览次数：20371 次

js实现猜数字游戏

先附code:

<html>

<head>

<title></title>
<script language="javascript">
    var k  = 0;
    var randomValue=parseInt(100*(Math.random()));
    function textDisable()
    {
        document.getElementById("number").disabled=true;
    }
    
    function getRandomValue()
    {
        document.getElementById("randomValue").value=randomValue;
    }
    
    function getValue()
    {                
        var textValue=document.getElementById("number").value;
        if(!check(textValue,randomValue))
        {
            k++;
            document.getElementById("times").value=k.toString();
            if(k==5)
            {
                textDisable();
            }            
        }
        else
        {
            textDisable();   
        }
    }
    
    function check(textValue,randomValue)
    {
        var flag=false;
        var tempResult="";
        if(textValue>randomValue)
        {
            document.getElementById("compareResult").innerHTML="the value is larger than random value!";       
        }
        else if(textValue==randomValue)
        {
            flag=true;
            document.getElementById("compareResult").innerHTML="the value is equals with random value,congratulations!";          
        }
        else
        {
            document.getElementById("compareResult").innerHTML="the value is smaller than random value!";       
        }
        return flag;
    }    
    
    function rePlay()
    {
        //对于disabled的赋值让我很狂晕,用disabled值无法动态赋值
        document.getElementById("number").disabled=false;
        document.getElementById("number").value="";
        document.getElementById("randomValue").value="";
        document.getElementById("times").value="";
    }
</script>
<style type="text/css">
body{ text-align : center ; padding : 0px ; margin : 0px ; color : #36f ;}
.spanWidth{margin:0px 20px;}
.bottomline{ border : solid 0px #fff ; border-bottom : solid 1px #000 ; width : 3em ; text-align : center ;}
</style>

</head>

<body>
    <div id="container">
         <h2>猜数字游戏</h2>
         <p>系统随机产生一个介于0-99的数字，玩家有五次机会玩乐。</p>         
         <p>请玩家输入数字：<input type="text" id="number" class="bottomline"><span class="spanWidth"></span>
         <input width="20px" type="button" onClick="getValue()" value="O K"  />
         </p>
         <p>比较输入值与随机值：<span id="compareResult"></span></p>
         <p>游戏玩家次数：<input type="text" id="times" class="bottomline"/></p>
         <p>随机数：<input type="text" id="randomValue" class="bottomline" readonly="readonly"/>
         <span class="spanWidth"></span>
         <input type="button" value="查看随机数" onclick="getRandomValue()" />
         </p>
         <p><input type="button" id="rePlay" onclick="rePlay()" value="重玩"></p>
    </div>
</body>

</html>

刚开始接触js脚本，做了一个简单的小程序，却用了一天的时间，让我很惊讶，原来自己真的很菜啊！

下面就说说这个程序我所遇到的坎儿，算法倒是没什么，就是语法！

1.知道js是弱类型语言，数据类型都为var声明，可由于其他编程语言的习惯，k就顺手写成int型，查了好久才发现啊

2.button按钮单击没效果，原来是写好的函数没调用，也让我无语

3.innerText对于不同浏览器的显示问题

4.document.getElementById("number").disabled=false;我加过注释的，这个让我花的时间最多，在文本框中设置的是属性值为"disabled"，却不知与之相反的可用值。还有就是disabled的属性值True,False是否加“”，我也调试了好久。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js兑现猜数字游戏

相关资料更多>

推荐阅读更多>