使用JavaScript实现好玩的猜数字功能

猜数字演示

功能实现思路

首先我们需要想明白猜数字这个功能的执行步骤，只有将步骤梳理清晰了，才能想明白对应的需要怎么做：
1. 页面打开时生成随机数
2. 随后进行提问，让用户进行输入
3. 当用户输入完毕后获取到用户输入的值
4. 判断用户输入的值是否大于、小于、等于随机生成的值
5. 根据判断返回不同的结果

• 小于则提示小于，再次开始提问
• 大于则提示大于，再次开始提问
• 等于提示猜对了，程序结束

在分析功能实现思路时大家可以使用思维导图或者直接在编辑器中编写中文，建议大家在做程序时都是先进行分析思路，再开始编写代码，养成良好的习惯更有利于我们培养逻辑思维能力，且功能实现后也要进行总结，比如这个功能使用了什么方法实现，后边能不能使用更加简单点的方法实现，尝试一个功能使用多种方法进行实现，你就会发现代码其实真的很简单，发现其中的乐趣，才能更好的掌握技术

1.页面打开时自动生成一个随机的数字

生成随机数的方法相信大家都不陌生，只需要使用 random 方法即可，但是要考虑 random 的取值范围只有 0 ~ 1，且不包含 1，怎么实现规定范围内的随机取值呢，下面我们来看一下
指定范围内的随机整数，可以使用以下公式：

let rand_num = Math.floor(Math.random() * (max - min) + min);
//其中max和min是所要生成的随机数的最大值和最小值

生成指定范围内的随机浮点数，可以使用以下公式：

let rand_num = Math.random() * (max - min) + min;
//其中max和min是所要生成的随机数的最大值和最小值

生成指定区间的随机数（包含起始值但不包含结束值），可以使用以下公式：

let rand_num = Math.random() * (end - start) + start;
//其中start是起始值，end是结束值

此外，还可以搭配着 ceil 、 floor 、 round 方法来对随机生成的数字进行四舍五入、向上取整或向下取整

2. 页面打开时会进行提问，让用户进行输入

实现提问这个在练习中推荐使用 prompt 弹出窗，这个是属于js中 BOM 自带的弹出窗，可以对用户进行提问，供用户进行输入内容后返回至js中，只需要声明一个变量并赋值 prompt() 即可

let msg = prompt('提示信息');
// 该弹窗会把 '提示信息' 渲染至弹出窗，并自带一个输入框和确认取消按钮

或者如果是在实际项目或者功能中推荐使用 html 元素自行定义，这样可以避免 js弹出窗 的问题，用户体验更佳

3. 当用户输入完毕后获取到用户输入的值

• 这里如果使用的是 js 中自带的弹出窗则不需要自定义函数，可以直接调用变量名来获取输入框中用户输入的内容

console.log(msg);
//打印出用户输入的内容进行查看是否获取到

• 如果使用的是 html 元素自行定义的，需要使用 DOM 提供的方法进行获取

document.getElementById('id')//	通过元素 id 来查找元素
document.getElementsByTagName('name')//	通过标签名来查找元素
document.getElementsByClassName('class')//	通过类名来查找元素
document.getElementsByName('name')//	通过表单元素中 name 名查找元素
document.querySelector('CSS 选择器')//	通过 CSS 选择器获取匹配上的第一个元素
document.querySelectorAll('CSS 选择器')//	通过 CSS 选择器获取匹配上的所有元素

只需要在获取元素后通过 .value 属性就可以获取到输入框中用户输入的内容

4. 判断用户输入的值是否等于\小于\大于自动生成的值

这里判断推荐使用 if else 语句进行判断

if(用户输入的内容 > 随机生成的值){
	console.log('提示输入的内容大于正确答案');
}else if(用户输入的内容 < 随机生成的值){
	console.log('提示输入的内容小于正确答案');
}else{
	console.log('提示用户猜对了');
}

5. 在提示过之后还需要根据条件重新进行提问

这方面可以使用函数的特性，将判断的步骤封装至函数内，在函数内进行调用函数本身继续进行判断

function 函数名(){
	if(msg > rand_num){
		alert('提示用户输入的数字大于正确数字');
		msg = prompt('提示信息，继续对用户进行提问');
		函数名();// 函数调用自身
	}else if(msg < rand_num){
		alert('提示用户输入的数字小于正确的数字');
		msg = prompt('提示信息，继续对用户进行提问');
		函数名();// 函数调用自身
	}else{
		alert('提示用户猜对了');
	}
}

最终代码

// 页面打开时生成随机数
let rand_num = Math.floor(Math.random() * (100 - 1) + 1);// 生成 1 - 100 的随机数
let msg = prompt('我生成了一个范围在1-100的随机数，请您进行竞猜');// 页面打开后对用户进行提问
IFNumSize();//当用户做出反应后进行判断
function IFNumSize(){
	// 如果大于生成的随机数字则提示大于，并重新进行提问
	if(msg > rand_num){
		alert('输入的数字大于正确数字');
		msg = prompt('上次猜的数字大了哦，请再次进行竞猜');
		IFNumSize();// 函数调用自身
	// 如果大于生成的随机数字则提示小于，并重新进行提问
	}else if(msg < rand_num){
		alert('输入的数字小于正确的数字');
		msg = prompt('上次猜的数字小了哦，请再次进行竞猜');
		IFNumSize();// 函数调用自身
		// 否则说明等于生成的数字，提示用户猜对了
	}else{
		alert('恭喜您猜对了!!!');
	}
}

这里只是利用了函数的特性进行制作功能，还可以使用 for 循环，或者 while 循环，都可以实现，代码的实现方法有很多种，但是实际实现的思路其实大差不差
大家如果做出了其他的方法可以在评论区进行沟通哦