<!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>猜数字</title>
<style>
body {
background: #eee;
}
div {
margin: 200px 500px;
}
input {
margin-top: 20px;
width: 200px;
height: 40px;
}
p {
color: red;
}
</style>
</head>
<body>
<div>
<section>猜数字小游戏</section>
<input type="text" value="">
<button>提交</button>
<p></p>
<button onclick="restart()">重新开始</button>
</div>
<script>
let input = document.querySelector("input");
let button = document.querySelector("button");
let p = document.querySelector("p");
let maxvalue = 100;
let minvalue = 0;
let count = 1;
// 生成随机数
let s = Math.floor(Math.random(1) * (maxvalue + 1));
// let s=1;
input.placeholder = "请输入" + minvalue + "-" + (maxvalue - 1) + "之间的数"
let test = function () {
console.log(1);
if (isNaN(input.value)) {
p.innerHTML = "您输入的不是数字,请重新输入";
input.value = "";
return;
}
if (input.value > maxvalue) {
p.innerHTML = "您输入的数字过大,请重新输入,范围在" + minvalue + "-" + maxvalue + "之间";
input.value = "";
return;
}
if (input.value < minvalue) {
p.innerHTML = "您输入的数字太小,请重新输入,范围在" + minvalue + "-" + maxvalue + "之间";
input.value = "";
return;
}
if (input.value == s) {
p.innerHTML = "恭喜你,答对了!用了" + count + "次机会";
p.style.color = "blue";
return;
} else if (input.value > s) {
p.innerHTML = "对不起你答错了,你的答案大了,答案区间为:" + minvalue + "-" + input.value;
maxvalue = input.value;
input.value = "";
} else {
p.innerHTML = "对不起你答错了,你的答案小了,答案区间为:" + input.value + "-" + maxvalue;
minvalue = input.value;
input.value = "";
}
count++;
}
button.addEventListener('click', test)
document.addEventListener('keyup', function (e) {
if (e.keyCode === 13) {
test();
}
})
// 重新开始
function restart() {
console.log(111);
location.reload()
}
</script>
</body>
</html>