JavaScript 实现网页版本的猜数字

与大师约会

已于 2023-06-13 17:23:31 修改

阅读量799

点赞数 3

分类专栏：项目文章标签： javascript 前端 html java-ee css

于 2023-03-21 07:00:00 首次发布

本文链接：https://blog.csdn.net/m0_63033419/article/details/129676508

版权

项目专栏收录该内容

12 篇文章 2 订阅

订阅专栏

文章介绍了如何使用JavaScript和HTML创建一个网页版的猜数字游戏。首先，通过Math.random()生成1到100之间的随机整数，然后获取用户输入并进行比较，根据比较结果给出反馈。文章详细讲述了生成随机数、捕获用户输入和事件处理的步骤。

摘要由CSDN通过智能技术生成

文章目录

网页版本的猜数字

网页版本的猜数字

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

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

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

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

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

<script>
     let toGuess = Math.random();
     console.log(toGuess);
</script>

可以看到上面就是一个随机生产的小数。

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

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

 let toGuess = 100 * Math.random();

根据上面的图片可以发现，这是一个特别长的小数。

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

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

可以看到小数部分被去掉了，但是此时的随机数范围是 [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 来显示结果 -->
     <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>