九宫格的样子以及游戏想大家接触过，想当年也是玩了好多九宫格游戏，其中最经典的就是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 250px;
11 margin:0 auto;
12 }
13 input{
14 text-align: center;
15 font: 40px/60px 'Microsoft YaHei';
16 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 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