九宮格的樣子以及游戲想大家接觸過，想當年也是玩了好多九宮格游戲，其中最經典的就是1-9這九個數字填進格子，橫豎向、對角相加數值相等這個益智游戲了。今天，在一個qq群里有人問九宮格做法，我就突然想起干前端這么長時間還真的沒做過九宮格。今天就把我做好的實例發上來，供看客們批評教育。當然這也是我的處女帖，好激動！
源碼下載：http://files.cnblogs.com/files/web-cxn/%E4%B9%9D%E5%AE%AB%E6%A0%BC%E6%BA%90%E7%A0%81.rar
實現思路：
1、每個格子輸入的數值必須為數字；
2、輸入數值不能重復；
3、輸入數值不能小於1或大於9；
4、數值不能為空；
5、相加方式共8個，分別為橫向三個、縱向三個、兩條對角線兩個值。詳情如下：
以每個格子所標記序號為標識：
橫向三個值：0-2，3-4，6-8；
縱向三個值：[0,3,6]、[1,4,7]、[2,5,8]；
對角線兩個值：[0,4,8]、[2,4,6]
實現過程：
很簡單，和上面圖片一樣，點擊提交按鈕開始判斷。
1、布局
html部分：
1 <div class="box"> 2 <input type="text"> 3 <input type="text"> 4 <input type="text"> 5 <input type="text"> 6 <input type="text"> 7 <input type="text"> 8 <input type="text"> 9 <input type="text"> 10 <input type="text"> 11 <button>提交</button> 12 </div>
css部分：通過css3中屬性實現。
1 *{margin:0;padding:0;outline: none;} 2 html,body{ 3 height: 100%; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 } 8 .box{ 9 position: relative; 10 width: 250px; 11 margin:0 auto; 12 } 13 input{ 14 text-align: center; 15 font: 40px/60px 'Microsoft YaHei'; 16 width: 30%; 17 float:left; 18 box-sizing:border-box 19 } 20 button{ 21 position: absolute; 22 bottom:-30px; 23 left: 50%; 24 margin-left: -30px; 25 width: 40px; 26 }
2、接下來重點來了，js部分
之前已經說了js的實現的方法，一下是相關代碼。
1 var oBtn=document.getElementsByTagName('button')[0], 2 aInp=document.getElementsByTagName('input'); 3 function isNum(){ 4 var aTemp=[];//創建臨時數組，依次存放九宮格中的數字 5 for(i=0;i<aInp.length;i++) 6 { 7 var val=Number(aInp[i].value); 8 if(isNaN(val) || val<1 || val>9) {//判斷當前輸入框中數值是否是數字，是否小於1，是否大於9？ 9 alert('1、您只能輸入1-9純數字；2、不能為空；'); 10 return false;//若滿足任意一條件直接退出函數不往下走 11 } 12 for(s=0;s<aTemp.length;s++){//循環判斷九宮格內是否有重復數值，若是有重復直接退出函數 13 if(val == aTemp[s]){ 14 alert('不能重復輸入!'); 15 return false; 16 } 17 } 18 //上述判斷都滿足，則將當前val的值放到數組aTemp中 19 aTemp.push(val); 20 } 21 //n后面所跟數字與上面圖片每個格子標記的數值一致 22 //將橫向與縱向的值設置為0；其中n1-n3為橫向三個值，n4-n6為縱向三個值 23 var n1=0,n2=0,n3=0,n4=0,n5=0,n6=0, 24 //n7、n8分別為兩對角值 25 n7=aTemp[0]+aTemp[4]+aTemp[8], 26 n8=aTemp[2]+aTemp[4]+aTemp[6]; 27 //橫向：分段相加值 28 for(i=0;i<3;i++)n1+=aTemp[i]; 29 for(i=3;i<6;i++)n2+=aTemp[i]; 30 for(i=6;i<9;i++)n3+=aTemp[i]; 31 //縱向：因為縱向是每隔兩個格子相加一次，所以正好用取模方式計算 32 33 for(i=0;i<9;i++){ 34 (i%3==0) && (n4+=aTemp[i]);//當i%3=0時，分別為格子0、3、6 35 (i%3==1) && (n5+=aTemp[i]);//當i%3=1時，分別為格子1、4、7 36 (i%3==2) && (n6+=aTemp[i]);//當i%3=1時，分別為格子2、5、8 37 } 38 //判斷n1-n8各值是否都相等，當然可以任意一個n判斷，不局限只與n1的值相等 39 n1==n2 && n1==n3 && n1==n4 && n1==n5 && n1==n6 && n1==n7 && n1==n8 ? alert('恭喜您輸入正確！') : alert('很遺憾您輸入錯誤！'); 40 } 41 oBtn.onclick=isNum;
執行效果
1、當輸入數值為非數字，或大於9，或小於0，或為空時
2、當輸入重復數字時
3、當輸入正確時
源碼下載：http://files.cnblogs.com/files/web-cxn/%E4%B9%9D%E5%AE%AB%E6%A0%BC%E6%BA%90%E7%A0%81.rar