JavaScript应用——手把手教你做一个页面化猜数字游戏

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<button type="button" id="reset">重新开始一局游戏</button>

<br>

请输入要猜的数字：<input type="text" id="number">

<br>

已经猜的次数：<span id="count">0</span>

<br>

结果：<span id="result"></span>

//1.获取需要用到的元素

let inputE = document.querySelector（"#number"）;

let countE = document.querySelector（"#count"）;

let resultE = document.querySelector（"#result"）;

let btn = document.querySelector（"#button"）;

let resetBtn = document.querySelector（"#reset"）;

// 2.随机生成一个 1-100 的数字

let guessNumber = Math.floor（Math.random（） * 100） + 1// 0 - 1 之间的数

// 3.更新猜的次数

let count = 0;//记录猜的次数

btn.onclick = function（） {

count++;

countE.innerText = count;

let userGuess = parseInt（inputE.value）;//将输入框中的字符串转换成整数

//4.对比过程

if （userGuess == guessNumber） {

resultE.innerText = "猜对了";

resultE.style = "color: green;";

} else if （userGuess < guessNumber） {

resultE.innerText = "猜小了";

resultE.style = "color: blue;";

} else {

resultE.innerText = "猜大了";

resultE.style = "color: red;";

}

};

//5.实现重新开始一句游戏

resetBtn.onclick = function（） {

//清空方法一

//guessNumber = Math.floor（Math.random（） * 100） + 1//重新生成随机数

//count = 0;//将猜的次数设回0

//countE.innerText = count;

//resultE.innerText = "";//将猜的结果清空

//inputE.value = "";//j将用户的输入框清空

//清空方法二

location.reload（）;

}

</script>

</body>

</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64777.shtml