<!doctype html>
<!--
用于调试，请在console中查看每次的随机值
hello sun
1305110103-->
<html>
<head>
<meta charset="UTF-8">
<title>限制次数的猜数游戏</title>
<style type="text/css">
</style>
</head>
<body>
<div id="con">
<h3>每次猜数前请点击“获得随机数”</h3>
预测帝,come on:<input type="text" id="guessNumber" />
<input type="button" onclick="get()" value="获得随机数" id="get1"/>
<input type="button" onclick="game()" value="接下来就是见证奇迹的时刻" id="but" style="display:none;"/>
<input type="button" onclick="reset()" value="paly again" id="reset"/>
<p id="tip"></p>
<p id="chishu"></p>
</div>
<script type="text/javascript">
var num;//获得随机数
var n =5;//定义步数 设置全局变量
var get1 = document.getElementById("get1");
var lost = document.getElementById("but");
function game(){
var now_guess = document.getElementById("guessNumber").value;
var reg=/^[1-9]\d*$|^0$/;
if(reg.test(now_guess)==true)
{
var guess = parseInt(now_guess);
if(guess ==num){
bingo();
gameOver();
}
else if(guess>num)
{
n--;
tooHigh();
}
else
{
n--;
tooLow();
}
}
else
{
alert("请输入一个大于0-100的整数");
}
if(n==0) //判断每次点击后是否在规定步数内
{
gameOver();
alert("下次努力！数据是："+num);
}
}
function bingo(){
document.getElementById("tip").innerHTML="NB,这都行,兄弟你可以去买彩票了";
document.getElementById("chishu").innerHTML="";
}
function tooHigh(){
document.getElementById("tip").innerHTML="有点大了兄弟";
document.getElementById("chishu").innerHTML="你还有"+n+"步";
document.getElementById("guessNumber").value="";
}
function tooLow(){
document.getElementById("tip").innerHTML="太小了兄弟";
document.getElementById("chishu").innerHTML="你还有"+n+"步";
document.getElementById("guessNumber").value="";
}
function gameOver(){
lost.style.display="None";
get1.style.display="None";
}
function reset(){
n = 5;
var lost = document.getElementById("but");
get1.style.display="";
document.getElementById("tip").innerHTML="";
document.getElementById("chishu").innerHTML="你还有"+n+"步";
num = getNum();
document.getElementById("guessNumber").value="";
}
function getNum(){
var rand = Math.round(Math.random()*99+1);
return rand;
}
function get(){
num = getNum();
console.log(num);//为了测试
get1.style.display="None";
lost.style.display="";
}
</script>
</body>
</html>
