JavaScript 实现网页版本的猜数字

水深无声 2023-10-08 21:03 32阅读 0赞

#### 文章目录 ####

*  网页版本的猜数字
 *   *  1. 生成一个1~100之间的随机数
     *  2. 进行猜数字操作
     *  3. 整体代码的实现

## 网页版本的猜数字 ##

网页版本的与之前的普通版本思路是一样的。

如果是网页版的，首先需要一个输入框来让玩家将猜的数字输入进去，以及还要提醒玩家来输入数字，  
最后就是要有一个提交的 **按钮**。

<body>
        <div>请输入要猜的数字</div>
        <input type="text">
        <button>提交</button>
    </body>

![9644885e8e454c7caccfcbadda90e02c.png_pic_center][]

### 1. 生成一个1~100之间的随机数 ###

在 js 中使用 **Math.random()** 生成的是一个 **\[0, 1)** 之间的随机数，只不过这是一个随机的**小数**。

![7fdabe35c93d470b92be063ecea70ca6.png_pic_center][]  
  
可以看到上面就是一个随机生产的小数。

现在的任务就是将随机数的范围设置成 **\[1, 100\]** 之间的数字，而且还要是一个**整数**。

我们将随机数设为 n ，n 的范围就是 **\[0, 1)**，100 \* n 后，范围就是 **\[0, 100)**。  
此时就会生成一个对应范围的随机数字。

let toGuess = 100 * Math.random();

![952b227169b64d0c93e3b3421c31ddb2.png_pic_center][]  
根据上面的图片可以发现，这是一个特别长的小数。

如果想要把小数改为整数，可以使用 **parseInt** 直接把小数的部分去掉。

let toGuess =  parseInt(100 * Math.random());

![c71b41703be148be95587189fc44abd7.png_pic_center][]  
  
可以看到小数部分被去掉了，但是此时的随机数范围是 **\[0, 99\]** 之间的整数。  
因此还需要将它加上一个 1 ，将它的范围提升至 \[1, 100\]。

let toGuess = parseInt(100 * Math.random()) + 1;

此时再生成的随机数就是一个 **\[1, 100\]** 随机数了。

### 2. 进行猜数字操作 ###

先选中**按钮** 和 **输入框**。

let button = document.querySelector('button');
    let input = document.querySelector('input');

取出框中的内容并判断是不是空的输入框

button.onclick = function() {
        
        // 3.取出输入框中的内容
        if (input.value == '') {
        
            // 表明此时框中没有内容，直接返回
            return;
        }
    }

将取出来的内容转为整数

let inputNum = parseInt(input.value);

这里取出来的是输入框中的内容。  
  
比较一下大小关系

if (inputNum < toGuess) {
        
         // 猜小了
         resultDiv.innerHTML = '猜小了';
     } else if(inputNum > toGuess) {
        
         // 猜大了
         resultDiv.innerHTML = '猜大了';
     } else {
        
         // 猜对了
         resultDiv.innerHTML = '猜对了';
     }

**inputNum** 是取出的输入框的内容，**resultDiv** 取出用来显示结果的 div 元素，放到了其中。

### 3. 整体代码的实现 ###

<body>
        <div>请输入要猜的数字</div>
        <input type="text">
         <button>提交</button>
         
         <div class="result">
    
         </div>
    
        <script>
            // 1.生成一个 1 ~ 100 的随机整数
            let toGuess =  parseInt(100 * Math.random()) + 1; // 随机数
            console.log(toGuess);
    
            // 2.进行猜数字操作
            let button = document.querySelector('button');
            let input = document.querySelector('input');
            let resultDiv = document.querySelector('.result');
    
            button.onclick = function() {
        
                // 3.取出输入框中的内容
                if (input.value == '') {
        
                    // 表明此时框中没有内容，直接返回
                    return;
                }
                let inputNum = parseInt(input.value); // 将从框中取出来的内容转为整数
                // 4.比较一下大小关系
                if (inputNum < toGuess) {
        
                    // 猜小了
                    resultDiv.innerHTML = '猜小了';
                } else if(inputNum > toGuess) {
        
                    // 猜大了
                    resultDiv.innerHTML = '猜大了';
                } else {
        
                    // 猜对了
                    resultDiv.innerHTML = '猜对了';
                }
            }
        </script>
    </body>

![6b68b0542ec94b52b2bd6c260cb42d0e.png_pic_center][]  
  
可以看到此时生成的随机数是 52。  
  
![eb1df71cd2b249dab4ff4934d4543735.png_pic_center][]  
  
![998c25d860d34c3a996a8025e204fdb6.png_pic_center][]  
  
![65c74981205946edbaedf7bbff597ac9.png_pic_center][]  
  
此时的代码逻辑没有问题，这还是一个非常简单的代码的。

![7b400605fd954836b65da36516f6b593.png_pic_center][]

[9644885e8e454c7caccfcbadda90e02c.png_pic_center]: https://img-blog.csdnimg.cn/9644885e8e454c7caccfcbadda90e02c.png#pic_center
[7fdabe35c93d470b92be063ecea70ca6.png_pic_center]: https://img-blog.csdnimg.cn/7fdabe35c93d470b92be063ecea70ca6.png#pic_center
[952b227169b64d0c93e3b3421c31ddb2.png_pic_center]: https://img-blog.csdnimg.cn/952b227169b64d0c93e3b3421c31ddb2.png#pic_center
[c71b41703be148be95587189fc44abd7.png_pic_center]: https://img-blog.csdnimg.cn/c71b41703be148be95587189fc44abd7.png#pic_center
[6b68b0542ec94b52b2bd6c260cb42d0e.png_pic_center]: https://img-blog.csdnimg.cn/6b68b0542ec94b52b2bd6c260cb42d0e.png#pic_center
[eb1df71cd2b249dab4ff4934d4543735.png_pic_center]: https://img-blog.csdnimg.cn/eb1df71cd2b249dab4ff4934d4543735.png#pic_center
[998c25d860d34c3a996a8025e204fdb6.png_pic_center]: https://img-blog.csdnimg.cn/998c25d860d34c3a996a8025e204fdb6.png#pic_center
[65c74981205946edbaedf7bbff597ac9.png_pic_center]: https://img-blog.csdnimg.cn/65c74981205946edbaedf7bbff597ac9.png#pic_center
[7b400605fd954836b65da36516f6b593.png_pic_center]: https://img-blog.csdnimg.cn/7b400605fd954836b65da36516f6b593.png#pic_center