**
使用JvaScript做一个简单的猜数字游戏（这里设置的数字范围是0-100）
**
JavaScript是一门目前流行的面向对象的脚本语言，可以使用它来做很多事情，这里为大家分享一下如何使用js语言来写出一个猜数字游戏。
1、需求
用户可以控制游戏的开始和结束。在用户点击开始后，系统自动为用户生成一个0-100的随机数，用户在输入框中输入内容后点击确认后可以根据输入内容提示相关信息。
2、逻辑分析
使用条件语句来形成游戏的循环进行。
- 根据开始按键的值来获得随机数randomNumber：
- 根据结束按键的值来结束游戏：
- 使用if语句判断用户是否已经输入数据，如果输入了数据就对输入的数据格式进行判断，格式正确就进行转换，转换后用于和系统生成的随机数进行比较
3、具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 320px;
height: 100px;
border: 1px solid #8A8A8A;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>0-100间的数字，点击开始进行猜数字游戏！</p>
<input type="button" value="开始" id="start" style="width: 80px;" onclick="strat_End()" />
<input type="text" id="input" value="" />
<input type="button" value="确认" id="confirm" onclick="submit_Input()" />
</div>
<script type="text/javascript">
//获取元素节点
let confirm = document.getElementById('confirm');
let start = document.getElementById('start');
let input = document.getElementById('input');
let randomNumber;
//点击开始或结束按钮触发函数
function strat_End() {
//当按键是开始,就生成随机数并保存在randomNumber中
if (start.value == "开始") {
//生成随机数
randomNumber = Math.floor(Math.random() * 100);
//用于在控制台获取生成的随机数
// console.log(randomNumber);
//点击了开始按钮后将按钮改变成结束按钮
start.value = "结束";
//当按键是结束按钮时,将randomNumber的值清除掉,便于游戏循环
} else if (start.value == "结束") {
//清除randomNumber的值
randomNumber = '';
//查看randomNumber的值是否已被清除
// console.log(randomNumber);
//将按钮转换为开始按钮,让游戏可以循环进行,按钮可以再次点击
start.value = "开始";
}
//将系统自动生成的随机数返回用于计算
return randomNumber;
}
//点击确认按键后获取输入框的值并进行判断
function submit_Input() {
//如果是在点击了开始后再点击确认按键,将获取输入框的值
if (start.value == "结束") {
//判断输入框的值是否为空
if (input.value != '') {
//输入框的值不为空，判断输入框用户输入数据的数据类型能否转换为数字类型
if (!isNaN(Number(input.value))) {
//便于保存每次用户输入的数据
// console.log(input.value);
//数据类型可以转换为数字时,将转换后的数字保存起来便于比较
let inputNumber = Number(input.value);
//调用封装的result方法,比较用户输入数据和系统生成随机数的大小
result(randomNumber, inputNumber)
} else {
//用户输入的数据类型不正确时,对用户进行提示
alert("请输入正确的数字！");
//将用户输入的错误数据自动清空
input.value = '';
}
} else {
//用户没有输入数据时点击了确认按键,对用户进行提示
window.alert("请输入数字!");
}
} else {
//当用户已经结束游戏或者第一次进入游戏就先输入了数据点击了确认按键,对用户进行提示
alert("你还没有点击开始哦！");
//如果用户输入了数据,将用户输入的数据自动清除
input.value = '';
}
}
//封装方法对用户输入的数据和用户自动生成的随机数进行比较大小
function result(randomNumber, inputNumber) {
//输入数据比随机数大
if (inputNumber > randomNumber) {
//提示用户输入数据大了
window.alert("输入数字大了！");
//清空输入的数据,便于用户再输入
input.value = '';
}
//输入数据比随机数小
else if (inputNumber < randomNumber) {
//提示用户输入数据小了
window.alert("输入数字小了！");
//清空输入的数据,便于用户再输入
input.value = '';
}
//输入数据与随机数相等
else {
window.alert("你猜对啦！");
//用户点击提示框确认按键后，游戏自动结束，并自动将按钮转换为开始按钮
start.value = "开始";
}
}
</script>
</body>
</html>
JavaSccript条件语句
JS的条件语句：
- if…else：先判断if()括号中表达式或变量的条件，如果为true，就会执行if后面的代码块，当if中条件返回false，就会执行else中的语句，或者执行else if后面的语句，if…else可以嵌套使用。if…else语句语法如下：
if (condition1) {
//当条件 1 为 true 时执行的代码
} else if (condition2) {
//当条件 2 为 true 时执行的代码
} else {
//当条件 1 和 条件 2 都不为 true 时执行的代码
}
- switch…case：case后面的值是对n进行判断，当其值与n相等时会执行case下的代码块，当执行到break时，会跳出switch语句，当case后没有break是，会一直向下执行直到遇到break；当所有case都不满足时，会执行default后面的语句，然后跳出switch语句。switch语句的语法如下：
switch(n) {
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
JavaScript循环语句
JS的循环语句：
- for：表达式1是完成循环变量的初始化，当然也可以在外部定义，然后for内部可以省略表达式1；表达式2是循环条件，值为boolean类型，可以省略，在for循环内部设置，但是不建议省略；表达式3的值表示循环后循环变量的操作，负责修改变量，改变循环条件；3个表达式之间使用分号隔开。for循环的语法如下：
for (表达式1; 表达式2; 表达式3) {
循环语句;
}
- 正常的for循环：
for (var i = 0; i < 5; i++) {
console.log(i);
}
- 省略表达式1的for循环：
var i = 0;
for (; i < 5; i++) {
console.log(i);
}
- 省略表达式2的for循环：
for(var j = 0; ; j++){
if(j < 10){
console.log(j);
}else{
break;
}
}
- 省略表达式3的for循环：
for(var i = 0; i <10; ){
console.log(i);
i++;
}
- for…in：循环遍历对象的属性或数组中的元素。语法如下：
var person={fname:"John",lname:"Doe",age:25};
for (var x in person) { // x 为键名
console.log(person[x]); //访问值时语法是对象[键名]
}
var arr = ["abc", "123", "www"];
for(x in arr) {
console.log(arr[x]);
}
- 改进后的for…in——for…of：让数组遍历更加方便，可以直接得到数组元素。语法如下：
for (var value of myArray) {
console.log(value);
}
- for…of、for…in、forEach()三种遍历方法的比较
：
- for...of不能直接遍历一个对象，在遍历对象时需要将对象转换为一个迭代对象（使用Map）；适用于遍历数组。
- for...in适用于对象遍历，当遍历对象时直接得到对象的属性，要拿到属性的值，使用对象名["属性名"]来访问，不能使用对象名.属性名访问。
- forEach：适用于数组遍历，需要为其传递一个回调函数作为参数，通过会滴到函数输出数组元素。
- while循环：适用于未知循环次数的情况，当while条件不满足时一次都不会执行。
- do…while循环：无论while的条件是否满足，都会执行一次do中的代码。