1.<body>内容
<div id="box">
<div id="title">
<b>猜数字游戏</b>
</div>
<div id="text1">
<p>现在已生成一个1-100的数<br />字，猜中有奖</p>
</div>
<div id="text">
<input type="text" id="text2"/>
</div>
<div id="button1">
<input type="button" value="确认" id="right" />
</div>
<div id="show">
<div id="showText"></div>
</div>
<!--<input type="button" value="再来" id="again" />-->
</div>
2.CSS样式设置
<style type="text/css">
#box{
width:225px;
height: 313px;
/*background: blue;*/
margin:100px auto;
border: 1px solid black;
}
#title{
width: 180px;
height: 63px;
font-size:33px;
padding-left:45px ;
padding-top: 10px;
}
#text1{
width: 180;
height: 59px;
font-size: 14px;
padding: 0px 20px;
align-content: center;
}
P{
text-align: center;
}
#text{
width:225px ;
height: 55px;
/*background: blue;*/
position: relative;
}
#text2{
width:104px ;
height: 53px;
position: relative;
left: 58px;
border: 1px solid black;
}
#button1{
width:225px ;
height: 42px;
/*background: blue;*/
position: relative;
}
#right{
width: 104px;
height:27px ;
border: 1px solid black;
position: relative;
background: #ebebeb;
left: 58px;
top: 13px;
}
#show{
width: 220px;
height: 60px;
border: none;
}
#showText{
width: 120px;
height: 54px;
position: relative;
left: 96px;
top: 10px;
font-size: 16px;
color: #958787;
}
</style>
3.js设置
<script>
var show = document.getElementById('showText')
var right = document.getElementById('right')
var oText = document.getElementById('text2')
var b = parseInt(Math.random()*100)
right.onclick = function(){
var t = oText.value
if(b>t){
show.innerHTML='小了'
}else if(b<t){
show.innerHTML='大了'
}else{
show.innerHTML='猜中了'
}
}
</script>
4.实现页面
03-猜数字.png
