Article Directory
Web version of Guess the Number
The idea of the web version is the same as that of the previous normal version.
If it is a web version, first an input box is needed for the player to enter the guessed number, and the player is also reminded to enter the number, and
finally there is a submit button .
<body>
<div>请输入要猜的数字</div>
<input type="text">
<button>提交</button>
</body>
1. Generate a random number between 1 and 100
Using Math.random() in js generates a random number between [0, 1) , but it is a random decimal .
<script>
let toGuess = Math.random();
console.log(toGuess);
</script>
It can be seen that the above is a randomly generated decimal.
The task now is to set the range of the random number to a number between [1, 100] , and it must be an integer .
We set the random number as n, the range of n is [0, 1) , after 100 * n, the range is [0, 100) .
At this point, a random number corresponding to the range will be generated.
let toGuess = 100 * Math.random();
According to the picture above, it can be found that this is a particularly long decimal.
If you want to change the decimal to an integer, you can use parseInt to directly remove the decimal part.
let toGuess = parseInt(100 * Math.random());
It can be seen that the decimal part is removed, but the range of random numbers at this time is an integer between [0, 99] .
So you need to add a 1 to it to increase its range to [1, 100].
let toGuess = parseInt(100 * Math.random()) + 1;
The random number generated at this time is a [1, 100] random number.
2. Guess the number
First select the button and the input box .
let button = document.querySelector('button');
let input = document.querySelector('input');
Take out the content in the box and judge whether it is an empty input box
button.onclick = function() {
// 3.取出输入框中的内容
if (input.value == '') {
// 表明此时框中没有内容，直接返回
return;
}
}
Convert the retrieved content to an integer
let inputNum = parseInt(input.value);
What is taken out here is the content in the input box.
compare size
if (inputNum < toGuess) {
// 猜小了
resultDiv.innerHTML = '猜小了';
} else if(inputNum > toGuess) {
// 猜大了
resultDiv.innerHTML = '猜大了';
} else {
// 猜对了
resultDiv.innerHTML = '猜对了';
}
inputNum is the content of the input box taken out, and resultDiv takes out the div element used to display the result and puts it in it.
3. Implementation of the overall code
<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>
You can see that the random number generated at this time is 52.
There is no problem with the code logic at this time, and this is still a very simple code.
