<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="res"></div>
<input type="text" id="num">
<button id="guess">猜一猜</button>
<button id="reguess">再来一次</button>
<script>
var random = Math.floor(Math.random() * 20); //第一次生成随机数
console.log(random);
var _guess = document.querySelector("#guess"); //猜一猜按钮
var _reguess = document.querySelector("#reguess"); //再来一次
var _res = document.querySelector("#res"); //猜的结果
var _num = document.querySelector("#num"); //用户输入框
_reguess.style.display="none"; //默认再来一次隐藏
//点击猜一猜的操作
_guess.onclick = function() {
var num = _num.value; //获取用户输入数据
//比较
if (num > random) {
_res.innerHTML = "猜大了"
}
if (num < random) {
_res.innerHTML = "猜小了"
}
//猜对，再来一次显示
if (num == random) {
_res.innerHTML = "猜对了"
_reguess.style.display="block";
}
}
//点击再来一次的操作
_reguess.onclick=function(){
// 再来一次显示
_res.innerHTML="";
_num.value="";
_reguess.style.display="none";
// 重新生成随机数
random = Math.floor(Math.random() * 20);
console.log(random);
}
</script>
</body>
</html>
