1  2  3  4     
       5      6     
       7  8  9 
      
       10     
       
猜数字小游戏
11     
       
请在输入框中填写你猜测的数字，猜测范围是0-100以内的正整数哦！
12     
       
        13         
        输入数字：14         
        15         
        监测16         
        
17     
       
18     
       
        19         
        猜测提示：20         
        21         
        23     
       
24     
       
        25         
        已测数字：26         
        
         27             
         37         
        
38     
       
39     
       
        40         
        猜测结果：41         
        42         
        45     
       
46     
       
        47         
        sorry， 你的十次机会用完了。 game over！48         
        
49         
        50     
       
51 
      
52     53 54 

1 html {  2   font-size: 10px;  3   font-family: '微软雅黑', sans-serif;  4 }  5   6   7 h1 {  8   font-size: 60px;  9   text-align: center; 10 } 11  12 p, li { 13   font-size: 16px;   14   line-height: 2; 15   letter-spacing: 1px; 16 } 17  18  19 html { 20   background-color: #cce7ff; 21 } 22  23 body { 24   width: 600px; 25   margin: 200px auto; 26   background-color: #fbe0bb; 27   padding: 0 20px 20px 20px; 28   border: 5px solid #ffd497; 29 } 30  31 h1 { 32   margin: 0; 33   padding: 20px 0;   34   color: #ff91a0; 35   text-shadow: 3px 3px 1px #690000; 36 } 37  38 img { 39   display: block; 40   margin: 0 auto; 41 } 42 .content div { 43     padding: 10px 0 10px 125px ; 44     font-size: 16px; 45     margin-bottom: 10px; 46     background: #ffe8c7; 47 } 48 .content div span{ 49   display: inline-block; 50   margin: 5px 10px 5px 0; 51   padding: 5px 10px; 52 } 53 .error{ 54   background: #ff7800; 55   color: white; 56 } 57 .success{ 58   background: #42ad42; 59   color: white; 60 } 61 .over{ 62   background: red; 63   color: white; 64 } 65 .old-num{ 66   border: 1px solid #fdc87e; 67 } 68 .info-up{ 69   color: red; 70     background: #ffd2d2; 71 } 72 .info-down{ 73   color: blue; 74     background: #d9d9ff; 75 } 76 button{ 77   padding: 5px 7px; 78   background: #4488ff; 79   border: none; 80   font-size: 16px; 81   color: white; 82 } 83 button:hover{ 84   cursor: pointer; 85   background: #3971d4; 86 } 87 input{ 88   padding: 5px 10px; 89   border: 1px solid #999; 90   outline: none; 91   margin-right: 10px; 92 } 93 input:focus{ 94   outline: none; 95   border-color: #4488ff; 96 } 97 .cont3:after{ 98   content: ""; 99   clear: both;100   display: block;101   height: 0;102   visibility: hidden;103 }104 .cont3 b{105   float: left;106     margin: 12px 0;107 }108 .cont3 div{109       margin-left: 85px;110     padding: 0;111 }112 .cont4 span{
    margin-left: 5px;}113 .cont1 p{114   margin: 5px 0 0;115   font-size: 12px;116   color: red;117   padding-left: 85px;118 }119 h4 {120     margin-top: 0;121     text-align: center;122     color: #333;123 }124 .content .cont5{125   display: none;126   padding-left: 0;127   text-align: center;128 }129 .gameover .cont5{130   display: block;131 }132 .start .cont2,.start .cont3,.start .cont4{133   display: none;134 }135 .gameover .cont2,.gameover .cont3,.gameover .cont4{136   display: none;137 }138 .reset{139       background: #4488ff;140     padding: 5px 20px;141     color: white;142     margin-top: 10px;143     border: 0;144 }

1 var content = document.querySelector(".content"); 2 var oP = document.querySelector(".cont1 p"); 3 var btn = document.querySelector("button"); 4 var resetBtn = document.querySelector(".reset"); 5 var clientNum = document.querySelector("input"); 6 var oldNum = document.querySelector(".cont3-box"); 7 var resultBox = document.querySelector(".cont2 span"); 8 var infoBox = document.querySelector(".cont4 span"); 9 var oBtn = document.querySelector("button");10 var timesNum = 0;11 var radomNum = parseInt(Math.random()*100);12 oBtn.onclick = function(){13     var oValue = clientNum.value;14     if(oValue == ""){
    //控制数字的输入格式15         oP.innerText = "空字符您让我咋猜呢？请输入数字!";16     }else if(oValue < 0 || oValue > 100){17         oP.innerText = "只要0-100以内的正整数";18     }else if(isNaN(oValue)){19         oP.innerText = "只支持数字格式，别乱填啊大爷！";20     }else{
    //格式无误且非空后再调用逻辑函数21         content.className = "content"; // 确定输入的是数字后，展示结果界面22         innerText(oValue);//调用“添加已测数据span结构”的innerText函数23         timesNum++;// 添加一次记录一次机会，到了十次以后输入框状态关闭24         if(timesNum == 10){25             clientNum.disabled = true;26             oBtn.disabled = true;27             content.className = "content gameover";// 十次后，game over 出现。28         }else{29             checkFun(oValue)30         }31         oP.innerText = "";//第二次填写格式正确，就去掉格式错误的提醒文字32     }33     clientNum.value = ""; //点击按钮传出去后销毁input里边的内容34 }35 function innerText(oValue){36     var oldNumBox = document.createElement("span");37     oldNumBox.className = 'old-num';38     oldNumBox.innerText = oValue;39     oldNum.appendChild(oldNumBox);40 }41 function checkFun(oValue){42 43     console.log(oValue);44     if(oValue > radomNum){45         resultBox.className = "info-up";46         resultBox.innerText = "你的猜测高了!";47         infoBox.className = "error";48         infoBox.innerText = "错误!";49     }else if(oValue < radomNum){50         resultBox.className = "info-down";51         resultBox.innerText = "你的猜测低了!";52         infoBox.className = "error";53         infoBox.innerText = "错误!";54     }else{55         resultBox.className = "success";56         resultBox.innerText = "你的猜测正确!";57         infoBox.className = "success";58         infoBox.innerText = "恭喜你答对了!";59     }60 }61 resetBtn.onclick = function(){62     // 游戏重来，刷新页面63     window.location.reload(true);64 }