1、要求:
在输入框中输入你猜的数字,然后会和系统里随机的数字进行比较返回比较结果,如果你手动输入的数字比随机的数字大,会在页面里输出“猜大了”,若比随机数字小,会在页面里输出"猜小了",否则,就是"猜对了",会出现对应提醒。如果猜对的话,会出现之前隐藏的一个按钮,提醒你是否继续游戏,点击代表继续游戏,小按钮也会消失。
2、案例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 200px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<div id="box"></div>
<input id="first" type="text" placeholder="请输入你猜到的数值" value=""><button οnclick="test()">猜一猜</button><br>
<button id="second" style="display: none;" οnclick="test2()" >再来一次?</button>
<script>
// var num=Math.random()*100;
// var num1=parseInt(num);
// console.log(num1);
var num2=Math.random()*100;
var num3=parseInt(num2);
console.log(num3);
var _first=document.getElementById("first");
var _box=document.getElementById("box");
var _second=document.getElementById("second");
function test(){
var num4=_first.value;
if(num4<num3){
_box.innerHTML="猜小了!";
}else if(num4>num3){
_box.innerHTML="猜大了!";
}else if(num4==num3){
_box.innerHTML="恭喜你猜对了!";
_second.style.display="block";
}
num5=Math.random()*100;//暗示全局变量
num6=parseInt(num5);//暗示全局变量
}
function test2(){
_box.innerHTML="";
_second.style.display="none";
_first.value="";
num3=num6*1; //全局变量
console.log(num3);
};
</script>
</body>
</html>
3、实现结果:
3.1、若输入的与随机产生的数值相比较小则显示:
3.2、若输入的与随机产生的数值相比较大则显示:
3.3、 若输入的与随机产生的数值相等大则显示:
谢谢查阅!