<!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>
<style>
#reguess{
display: none;
}
</style>
</head>
<body>
<div id="res"></div>
<input id="num" type="text">
<button id="guess" onclick="guess()">猜一猜</button>
<button id="reguess" onclick="reguess()">再来一次</button>
<script>
var _num=document.getElementById("num"); //表单
var _res=document.getElementById("res"); //结果
var _reguess=document.getElementById("reguess"); //结果
//生成随机数
let random=Math.ceil(Math.random()*10);
console.log(random);
// 猜一猜
function guess(){
//获取用户输入值
let num=_num.value*1;
let res=''; //结果
if(num>random){
res="猜大了"
}else if(num<random){
res="猜小了"
}else{
res="猜对了"
_reguess.style.display="inline-block";
}
//将结果存入div
_res.innerHTML=res;
}
//再来一次
function reguess(){
// 隐藏再来一次
_reguess.style.display='none';
//清空结果
_res.innerHTML="";
//清空表单
_num.value=""
//重新生成随机数
random=Math.ceil(Math.random()*10);
console.log(random);
}
</script>
</body>
</html>