网页版本的猜数字
网页版本的与之前的普通版本思路是一样的。
如果是网页版的，首先需要一个输入框来让玩家将猜的数字输入进去，以及还要提醒玩家来输入数字，
最后就是要有一个提交的 按钮。
<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>
可以看到此时生成的随机数是 52。
此时的代码逻辑没有问题，这还是一个非常简单的代码的。
