<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

</head>

<body>

    <div style="width:200px;height:200px;border:dashed;background-color:darkseagreen;border-width:1px;">

        <p>1.猜測一个0到100的数<br />2.雙擊文本框重新輸入<br />3.輸入result顯示目標數值</p>

        <label id="lblResult" style="width:30px;background-color:crimson">显示对错</label>

        <br />

        <label id="lblCount" style="background-color:darkcyan">猜测次数：0</label>

        <br />

        <input type="text" id="txtNum" onchange="getResult()" ondblclick="CaiShu()" />

        <br />

        <label id="lblDebug">Coded By Phoenix&copy;2016</label>

        <button hidden="hidden" id="btnReset" onclick="reset()">重新開始</button>

    </div>

    <script>

        var shuzhi = parseInt(Math.random() * 100);//得到要让人家猜测的数

        var cishu = 0;

        //document.getElementById("realValue").innerHTML = shuzhi;

        var lblResult = document.getElementById("lblResult");

        var lblDebug = document.getElementById("lblDebug");

        var txtNum = document.getElementById("txtNum");

        function CaiShu() {

            var num = txtNum.value;//猜测的数

            //alert(num);

            if (shuzhi>num) {

                lblResult.innerHTML = "猜小了";

                cishu = cishu + 1;

                txtNum.textContent = "";

            }

            if(shuzhi<num) {

                lblResult.innerHTML = "猜大了";

                cishu = cishu + 1;

                txtNum.textContent = "";

            }

            if(shuzhi==num)

            {

                lblResult.innerHTML = "猜對了";

                document.getElementById("btnReset").hidden = null;

            }

            //顯示猜測次數

            document.getElementById("lblCount").innerHTML ="猜測次數"+ cishu;

        }

        function reset() {

            shuzhi = parseInt(Math.random() * 100);

            cishu = 0;

            document.getElementById("btnReset").hidden = "hidden";

            document.getElementById("txtNum").value = "";

            document.getElementById("lblResult").innerHTML = "顯示對錯";

            document.getElementById("lblCount").innerHTML = 0;

        }

        function getResult() {

            var result = txtNum.value == "result";

            //lblDebug = result;

            if (result) {

                txtNum.value = shuzhi;

            }

        }

    </script>

</body>

</html>

Javascript猜数字游戏的更多相关文章

  1. JavaScript一个猜数字游戏

    效果图: 代码: <body> <script type="text/javascript"> window.onload = newgame; //页面载 ...

  2. 不一样的猜数字游戏 — leetcode 375. Guess Number Higher or Lower II

    好久没切 leetcode 的题了,静下心来切了道,这道题比较有意思,和大家分享下. 我把它叫做 "不一样的猜数字游戏",我们先来看看传统的猜数字游戏,Guess Number H ...

  3. jQuery学习（1）猜数字游戏

      jQuery是一个快捷.小型且特征丰富的JavaScript库.它使得HTML文档遍历及操作,事件处理,动画,Ajax等更简洁方便.它通过调用一个简单易用的API,就能在各种浏览器中使用.由于jQ ...

  4. HTML5 Canvas之猜数字游戏

    主要的内容描述的是如何渲染一个矩形的边框和填充背景,以及文字. 代码中有详细的注释: 效果图: 以下是代码: <!DOCTYPE html> <html lang="cn& ...

  5. C语言猜数字游戏

    猜数字游戏,各式各样的实现方式,我这边提供一个实现方式,希望可以帮到新手. 老程序猿就不要看了,黑呵呵 源代码1 include stdio.h include stdlib.h include ti ...

  6. java 猜数字游戏

    作用:猜数字游戏.随机产生1个数字(1~10),大了.小了或者成功后给出提示. 语言:java 工具:eclipse 作者:潇洒鸿图 时间:2016.11.10 >>>>> ...

  7. 【原创Android游戏】--猜数字游戏Version 0.1

    想当年高中时经常和小伙伴在纸上或者黑板上或者学习机上玩猜数字的游戏,在当年那个手机等娱乐设备在我们那还不是很普遍的时候是很好的一个消遣的游戏,去年的时候便写了一个Android版的猜数字游戏,只是当时 ...

  8. 【原创Android游戏】--猜数字游戏V1.1 --数据存储，Intent，SimpleAdapter的学习与应用

    --------------------------------------------------------------- V0.1版本 上次做完第一个版本后,发现还有一些漏洞,并且还有一些可以添 ...

  9. python学习笔记 ——python写的猜数字游戏 002

    from sys import exit import random def Arrfor(str): #CONTST = CONTST + 1 artificial = input("请输 ...

随机推荐

  1. linux 添加基于weblogic的nodemanager的服务

    用nodemanager来添加weblogic服务启动. 1.新建一个server,命名为Server1,端口设置为7055,其他采用默认值. 2.新建一个Machine,命名为Machine1.配置 ...

  2. js或jquery如何获取父级、子级、兄弟元素(包括祖级、孙级等)

    原生javascript方法: var a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.chi ...

  3. 2016HUAS_ACM暑假集训4F - 数论

    这个题目,如果没找到方向,确实有点一头雾水.但是如果你找对方向了,AC是分分钟的事.答案就是看n和m是否有除1之外的公约数. 简单证明:设n和m最大公约数不是1,假设为p.n和m总可以化为一个数乘以k ...

  4. CentOS7关闭防火墙方法

    在之前的版本中关闭防火墙等服务的命令是 service iptables stop /etc/init.d/iptables stop 在RHEL7中,其实没有这个服务 [root@rhel7 ~]# ...

  5. MyBatis学习(二)

    前言 昨天的博客简单的记录了MyBatis的起源.作用.配置以及一个简单的查询例子.写到一半的时候,觉得已经学会了MyBatis,可是全写完的时候才发现,如果多个参数查询,如何表的名字与类字段名不一样 ...

  6. Windows 2012 中文乱码的解决办法

    背景:服务器安装2012 R2英文环境,软件为中文显示.已下载中文语言包安装到服务器上 现象:TXT文档的中文在服务器上打开显示为乱码,复制到本地电脑上可正常显示 解决办法:控制面板-语言-更改日期. ...

  7. 初级文法课程-第1课：名词的种类/名词的数/名词的所有格/冠词;be 动词、一般动词的现在式

    January 31, 2016 Unit 1 名词和冠词 名词:n (noun)  作用:当主词.补语.受词 1.名词的种类 [单数和复数--I like dogs]   普通名词:book,pen ...

  8. C++程序设计（关于函数中数组传递的一点心得）

    题目: 10个学生考完期末考试评卷完成后,老师需要划出及格线,要求如下: (1) 及格线是10的倍数: (2) 保证至少有60%的学生及格: (3) 如果所有的学生都高于60分,则及格线为60分:   ...

  9. mvc中Url.RouteUrl或者Html.RouteLink实现灵活超链接，使href的值随路由名称或配置的改变而改变[bubuko.com]

    mvc,超链接除了直接写在a标签的href内还可以使用路由规则来生成,这样在改变了路由规则或者路由名称时不用再去代码中更改href的值,而且还容易遗漏.借助Url.RouteUrl或者Html.Rou ...

  10. web.xml文件详解

      web.xml文件详解 Table of Contents 1 listener. filter.servlet 加载顺序 2 web.xml文件详解 3 相应元素配置 1 listener. f ...