猜数字游戏 

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

 

posted @ 2015-01-06 23:12  mayufo  阅读(167)  评论(0)    收藏  举报