JavaScript 实现网页版本的猜数字

文章目录

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

网页版本的猜数字


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


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

<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>


JavaScript 实现网页版本的猜数字_第1张图片

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

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


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

 let toGuess = 100 * Math.random();


JavaScript 实现网页版本的猜数字_第2张图片
根据上面的图片可以发现,这是一个特别长的小数。

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

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


JavaScript 实现网页版本的猜数字_第3张图片

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


JavaScript 实现网页版本的猜数字_第4张图片

可以看到此时生成的随机数是 52。





JavaScript 实现网页版本的猜数字_第5张图片

此时的代码逻辑没有问题,这还是一个非常简单的代码的。




JavaScript 实现网页版本的猜数字_第6张图片

你可能感兴趣的:(项目,javascript,前端,html,java-ee,css)