完成可交互的猜数字游戏。
当用户输入一个数字后,可以根据与系统生成的数字比较结果反馈给用户,大了,小了,或者猜对了。
1)输入数值比较后给出与系统数字的表结果。
2)猜中时弹出一个对话框,提示猜对了。
3)可查看正确数字。
查看正确数字
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-size: 80%;
font-family: "微软雅黑"courier monospace;
letter-spacing: 0.2em;
background-color: #efefef;
}
#page {
max-width: 950px;
height: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border: 4px double #000000;
background-color: pink;
box-shadow: 10px;
border-radius: 20px;
}
#title {
width: 200px;
margin: 5px auto 10px auto;
font-size: 25px;
text-align: center;
}
#submit {
text-align: center;
padding-top: 150px;
}
#footer {
padding-top: 10px;
text-align: center;
}
#suu {
width: 100px;
height: 100px;
background-color: gray;
box-shadow: 3px;
}
#curent {
width: 100px;
height: 50px;
background-color: gray;
box-shadow: 3px;
margin: 20px;
}
</style>
</head>
<body>
<div id="page">
<div id="title">
<p>欢迎来到</p>
<p>数字猜猜乐</p>
</div>
<div id="random">
<div id="suu">
</div>
<div id="curent">
</div>
</div>
<div id="submit">
<form action="#" method="get">
Number Guessed:
<input type="text" id="guessNum" name="guessNum" />
<input type="button" id="guess" name="guess" onclick="checknum()" value="提交" />
<input type="button" id="cur" name="cur" onclick="curNum()" value="查看" />
</form>
</div>
<div id="footer">
<p>游戏规则:猜数字,数字范围[0,100)</p>
</div>
</div>
</body>
<script>
var ran = parseInt(Math.random() * 100);
function checknum() {
var s1 = parseInt(document.getElementById("guessNum"));
if (s1 > ran) {
document.getElementById("suu").innerHTML = "大了!";
} else if (s1 < ran) {
document.getElementById("suu").innerHTML = "小了";
} else {
document.getElementById("suu").innerHTML = "正确";
}
}
function curNum() {
document.getElementById("curent").innerHTML = ran;
}
</script>
</html>