1.代码构成
猜数字游戏由css、HTML、JavaScript构成。其中JavaScript是这个游戏的灵魂。
2.需求说明
1.文本
第一行标题为H1、第二行为一行提示文本。（可着重渲染）
2.元素
由div盒子包裹，h1、p、input组成！
3.要求
第一个input为提示框，书写提示信息后，设置只读。
第二个为输入框，输入数字。进行猜数字
第三个为确定按钮，点击提交输入框的内容并进行判断。
只有10次输入机会，十次后返回失败！途中猜大了在提示框提示猜大了，猜小了提示猜小了。
并用警告框弹出剩余次数！
3.效果图
1.点击按钮开始游戏并提示信息
2.猜低提示
3.猜高提示（上一次）及猜对提示用的次数并提示游戏结束
4.提示后所有按键无效，重新刷新才能开始游戏
?
4.代码
注：CSS与JS为内部样式。jQuery为1.12版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猜数字游戏</title>
<script src="../js/jquery-1.12.4.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
cursor: pointer;
}
.section{
width: 500px;
height: 200px;
margin: 20px auto;
font-size: 14px;
line-height: 36px;
text-align: center;
background: url("img2/beijing.jpeg") no-repeat -78px -81px;/*背景复合属性 图片不平铺 偏移量-78像素和-81像素*/
}
span{
font-size: 13px;
font-weight: bold;
}
button{
width: 50px;
height: 21px;
line-height: 19px;
margin-left: 10px;
margin-top: 1px;
}
h1{
display: inline-block;
margin-top: 30px;
}
input:nth-of-type(1){
margin-left: 165px;
}
input:nth-of-type(2){
width: 45px;
}
</style>
<body>
<div class="section">
<h1>猜数字</h1>
<p>这个数在100以内。你只有10次机会！</p>
<span>
<input type="text" value="请在后面填写数值" readonly class="ipo">
猜吧:<input type="text" class="ipu"><button id="ENT">确定</button>
</span>
</div>
</body>
<script>
$(document).ready(function () {
var newNum = Math.floor(Math.random()*100);
var number = 0;
var re = true;
$("#ENT").click(function () {
if (re===true){
if (number===0){
alert("游戏开始！！！");
}
var newInput = $(".ipu").val();
alert("还有"+(9-number)+"次机会！");
if (newInput>newNum){
$(".ipo").val("不对！猜低点。");
number+=1;
$(".ipu").val("");
} else if (newInput<newNum){
$(".ipo").val("不对！猜高点。");
number+=1;
$(".ipu").val("");
}else if (newInput==newNum) {
$(".ipo").val("正确了！！！数字是："+newNum);
number+=1;
$(".ipu").val("");
alert("您一共用了"+number+"次机会");
alert("游戏结束，请刷新");
re = false;
return re;
}
if (number>=10){
alert("失败！！数字是："+newNum);
alert("游戏结束，请刷新");
re = false;
number=0;
}
}
});
})
</script>
</html>