猜数字小游戏（网页版）

目录

一. 游戏简介

二. 页面预览

三. 页面实现

四. 功能实现

五. 参考源码 

---

一. 游戏简介

在输入框内输一个数字，点击后面的“猜”按钮，系统会根据你猜的数字的大小，返回你是猜大猜小还是猜正确，系统还会统计你猜的次数，在猜数字的途中你点击按钮随时可以重新开始游戏

二. 页面预览

因为是简易版，所以没有太多的样式

️‍️猜数字之前： 

️‍️猜小了：

️‍️猜大了：

️‍️猜对了：

三. 页面实现

️‍️页面框架：

    

        请输入您猜的数字：
        
        
        

        您已经猜的次数：
        0
        

        结果：
        

        

        
    

️‍️页面简单样式：

四. 功能实现

使用document.querySelector()获取页面上的元素：

    var text = document.querySelector("#text");//获取输入元素
    var count = document.querySelector("#count");//获取次数元素
    var result = document.querySelector(".c1");//获取结果元素
    var guessBu = document.querySelector("#guess");//获取“猜”按钮元素
    var reBu = document.querySelector("#reBu");//获取“重新开始”按钮元素
    var sum = 0;//猜的总次数

️‍️生成随机数： 

    var guessNumber = Math.floor(Math.random()*100)+1;//生成随机数

说明：Math.random()随机生成[0,1)的数字，乘上100范围为[0,100)，加上1，范围为[1,101)，使用Math.floor()去掉小数部分，最后生成数字的范围为[0,100]

️‍️给“猜”按钮绑定点击事件：

点击按钮后，启动比较功能
首先将猜的总次数sum++，并将sum设置到页面中
需要先用parseInt()将输入框的内容转为整数，再进行比较
若输入的数大，则将提示颜色调整为红色，并设置到页面中
若输入的数小，则将提示颜色调整为红色，并设置到页面中
若输入的数为系统生成的随机数，则将提示信息调整为绿色，并设置到页面中

    guessBu.onclick = function(){ //给“猜”按钮绑定点击功能
        sum++;
        count.innerHTML = sum;
        var userGuess = parseInt(text.value);//获取输入的数字
        if(userGuess > guessNumber){ //如果输入大于系统生成数字
            result.innerHTML = "很遗憾，您猜大了！";
            result.style.color = "red"; //调正颜色为红色
        }else if(userGuess < guessNumber){//如果输入小于系统生成数字
            result.innerHTML = "很遗憾，您猜小了！";
            result.style.color = "red";
        }else { //输入等于系统生成数字
            result.className = "c2";
            result.innerHTML = "恭喜您，您猜对了！";
            result.style.color = "green";//调整颜色为绿色
        }
    }

️‍️给“重新开始游戏”按钮绑定点击事件：

首先重新生成随机数
再将猜测的总次数置0，并设置到页面中
再将提示信息置空，并设置到页面中
最后将输入框数字置空，并设置到页面中

    reBu.onclick = function(){//给“重新开始”按钮绑定点击事件
        guessNumber = Math.floor(Math.random()*100)+1;//重新生成随机数
        sum = 0;//猜的总次数置0
        count.innerHTML = sum;//将0填充
        result.innerHTML = "";//结果置空
        text.value = "";//输入框置空
    }

五. 参考源码 

拿来即可在自己电脑上运行，大家快来试试吧！

    
    
    
    
    


    

        请输入您猜的数字：
        
        
        

        您已经猜的次数：
        0
        

        结果：