<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,form,input,textarea,th,td,select{ margin: 0px;padding: 0px;};
em{font-style: normal;}
li{list-style: none;}
a{text-decoration: none;}
img{border: none;vertical-align: top;}
table{ border-collapse: collapse;}
input,textarea{outline: none;}
textarea{resize:none;overflow: auto;}
body{font-size: 12px;font-family: "微软雅黑";}
body{
background:url(img/beijing.jpeg);
}
#wrap{
width:300px;
margin:auto;
text-align:center;
}
h1{
color:#fff;
font-size:50px;
margin-top:50px;
display:block;
font-weight:bold;
}
p{
padding:10px;
text-align:center;
margin:opx;
background:rgba(255,255,255,0.65);
overflow:hidden;}
input{
width:300px;
height:80px;
color:#1A154F;
margin-top:20px;
font-size:36px;
border:none;
background:rgba(255, 255, 255, 0.65);
}
#text1{
text-align:center;
transition:all 0.5s;
font-family:"微软雅黑";
}
#btn{
margin-top:20px;
cursor:pointer;
font-family:"微软雅黑";
}
#info{
width: 260px;
height: 150px;
background: none repeat scroll 0% 0% rgba(65, 58, 87, 0.83);
border: 10px solid #FFF;
color: #FFF;
text-align: left;
padding: 10px;
line-height: 28px;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var owrap = document.getElementById('wrap');
var otext = document.getElementsByTagName('input')[0];
var obtn = document.getElementsByTagName('input')[1];
var op = document.getElementsByTagName('p')[0];
var num = Math.round(Math.random()*100);
var sum = 0;
var timer = null;
//初始化
otext.value = '请输入数字';
flash(otext,500,owrap);
function flash(obj,frequency,owrap,endfn)
{
flag = 1;
var onff = 1;
obj.flasher = setInterval(function ()
{
if(flag)
{
obj.style.background = '#fff';
}
else
{
obj.style.background = 'rgba(255, 255, 255, 0.65)';
}
flag = !flag;
owrap.onmouseover = function ()
{
clearInterval(obj.flasher);
obj.style.background = 'rgba(255, 255, 255, 0.65)';
}
},frequency)
};
obtn.onclick = function ()
{
if(otext.value == '')
{
alert('请输入数字');
}
else
{
if( num < otext.value && sum < 10)
{
alert('大了');
op.innerHTML += '<img src = "img/icon6.png">'
sum++
}
else if( num > otext.value && sum < 10)
{
alert('小了哦');
op.innerHTML += '<img src = "img/icon6.png">'
sum++;
}
else if ( num == otext.value && sum < 10 )
{
op.innerHTML = '';
for(var i = 0; i < 10; i++)
{
op.innerHTML += '<img src = "img/icon2.png">';
}
otext.value = '恭喜答对了';
flash(otext,500);
}
else if( sum == 10)
{
otext.value = '真遗憾';
}
}
};
};
</script>
</head>
<body>
<div id="wrap">
<h1>猜数字游戏</h1>
<br/><br/>
<p></p>
<input id="text1" type="text" value="请输入数字">
<input id="btn" type="button" value="确定">
<div id="info">
游戏规则
<br/><br/>
系统随机产生一个 0~100 之间的随机数，玩家共有10次机会去猜，系统会提示相对于真实值的高低。
</div>
</div>
</body>
</html>
