文章目录

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

网页版本的猜数字

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

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

请输入要猜的数字
提交

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

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

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

现在的任务就是将随机数的范围设置成 [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. 整体代码的实现

请输入要猜的数字
提交

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







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