<!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{ 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{ 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{ 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>