`
清流鱼
  • 浏览: 30351 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

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是否加“”,我也调试了好久。

 

分享到:
评论

相关推荐

    JavaScript实现猜数字游戏

    本博文源于js基础,旨在讨论如何实现猜随机数的小游戏。 题目重现 随机生成一个[0,100]区间的数字,不断重复用户输入,直到用户输入对为止。 实现原理 先用Math.random生成一个数字,欲得到[a,b]区间的随机整数,可...

    基于html的猜数字游戏设计(html+js+css)

    3.js控制生成的随机数与输入的数字比较 4.根据相比的结果提示并显示相应的图片 5.猜测次数默认是6次,6次没有猜中则为游戏挑战失败,点击重新开始按钮可重新开始 6.6次中有一次猜中则为胜利,猜中后不论还剩几次都将...

    【JavaScript源代码】js实现弹窗猜数字游戏.docx

    js实现弹窗猜数字游戏  本文实例为大家分享了js实现弹窗猜数字游戏的具体代码,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt;  &lt;html&gt;   &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; ...

    基于JavaScript实现猜数字游戏代码实例

    主要介绍了基于JavaScript实现猜数字游戏代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    JS猜数字游戏实例讲解

    本文实例为大家分享了JS实现猜数字游戏的具体代码,供大家参考,具体内容如下 猜数字游戏: 1)利用JS的Math内置对象,实现在1-50内选取一个整数随机数作为游戏答案 2)输入数字进行判断,共有10次输入机会 3)若...

    免费!猜数字游戏.rar

    HTML+JS实现猜数字游戏,规则:当用户输入一个数字后,可以根据与系统随机生成的数字(1~100)比较,结果反馈给用户,大了,小了,或者猜对了,猜中时提示用户告知猜对了。

    JS和html实现的猜数字小游戏实现.html

    JS和html实现的猜数字小游戏实现码中的JavaScript部分主要是通过两个函数guessNumber()和newGame()来实现猜数字游戏的功能。 当玩家输入数字,点击“猜一下”按钮或按下回车键时,guessNumber()函数会被调用。在该...

    猜数字游戏源码

    猜数字游戏 js+html 源码实现

    基于猜数字游戏开发系统的毕业设计实现.zip

    # 基于猜数字游戏开发系统的毕业设计实现 本毕业设计的目标是基于猜数字游戏开发一个系统。该系统将包括一个前端游戏界面和一个后端管理平台。前端游戏界面将允许用户进行猜数字游戏,后端管理平台将提供对游戏设置...

    jsp+servlet实现猜数字游戏

    jsp+servlet实现猜数字游戏主要用到了servlet方面的session,HttpServletResponse类中的sendRedirect()方法。 step1,客户访问或刷新getNumber.jsp页面时,随机给用户分配一个1-100之间的数字,将该数字存放到客户的...

    js实现一个猜数字游戏

    本文主要介绍了js实现一个猜数字游戏的实例代码。具有很好的参考价值,下面跟着小编一起来看下吧

    基于小学生猜数字游戏的毕业设计实现.zip

    # 基于小学生猜数字游戏的毕业设计实现 这篇毕业设计旨在利用小学生熟悉的猜数字游戏,设计一个基于Web的应用程序。该应用程序将允许用户在计算机上玩游戏,同时也可以与其他用户竞争。以下是该应用程序的一些主要...

    js实现弹窗猜数字游戏

    本文实例为大家分享了js实现弹窗猜数字游戏的具体代码,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt...

    猜数字游戏practice9.zip

    这个C#实现的小游戏是一个简单的猜数字游戏,让玩家猜一个1到100之间的随机生成的数字。以下是对这个小游戏的分析: Random 类的使用:游戏开始时,使用 Random 类生成一个1到100之间的随机数作为要猜的数字。 ...

    js猜数字小游戏的简单实现代码

    介绍了js猜数字小游戏的简单实现代码,很好玩的游戏哦,可以看看你的智商 是否惊人额

    猜数字游戏2021-3-9.zip

    这个C#实现的小游戏是一个简单的猜数字游戏,让玩家猜一个1到100之间的随机生成的数字。以下是对这个小游戏的分析: Random 类的使用:游戏开始时,使用 Random 类生成一个1到100之间的随机数作为要猜的数字。 ...

    猜数字游戏Guess-the-game.zip

    这个C#实现的小游戏是一个简单的猜数字游戏,让玩家猜一个1到100之间的随机生成的数字。以下是对这个小游戏的分析: Random 类的使用:游戏开始时,使用 Random 类生成一个1到100之间的随机数作为要猜的数字。 ...

Global site tag (gtag.js) - Google Analytics