<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="button" id="reset">重新开始一局游戏</button>
<br>
请输入要猜的数字:<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数:<span id="count">0</span>
<br>
结果:<span id="result"></span>
<script>
//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