本文實(shí)例介紹了javascript實(shí)現(xiàn)九宮格的對應(yīng)方法，分享給大家供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)思路：
1、每個格子輸入的數(shù)值必須為數(shù)字；
2、輸入數(shù)值不能重復(fù)；
3、輸入數(shù)值不能小于1或大于9；
4、數(shù)值不能為空；
5、相加方式共8個，分別為橫向三個、縱向三個、兩條對角線兩個值。詳情如下：
解釋：
以每個格子所標(biāo)記序號為標(biāo)識：
橫向三個值：0-2，3-4，6-8；
縱向三個值：[0,3,6]、[1,4,7]、[2,5,8]；
對角線兩個值：[0,4,8]、[2,4,6]
實(shí)現(xiàn)過程：
很簡單，和上面圖片一樣，點(diǎn)擊提交按鈕開始判斷。
1、布局
html部分：
<div class="box"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <button>提交</button></div>
css部分：通過css3中屬性實(shí)現(xiàn)。
*{margin:0;padding:0;outline: none;}html,body{ height: 100%; display: flex; justify-content: center; align-items: center;}.box{ position: relative; width: 250px; margin:0 auto;}input{ text-align: center; font: 40px/60px 'Microsoft YaHei'; width: 30%; float:left; box-sizing:border-box}button{ position: absolute; bottom:-30px; left: 50%; margin-left: -30px; width: 40px;} 2、接下來重點(diǎn)來了，js部分
之前已經(jīng)說了js的實(shí)現(xiàn)的方法，一下是相關(guān)代碼。
var oBtn=document.getElementsByTagName('button')[0], aInp=document.getElementsByTagName('input');function isNum(){ var aTemp=[];//創(chuàng)建臨時函數(shù)，一次存放九宮格中的數(shù)字 for(i=0;i<aInp.length;i++) { var val=Number(aInp[i].value); if(isNaN(val) || val<1 || val>9) {//判斷當(dāng)前輸入框中數(shù)值是否是數(shù)字，是否小于1，是否大于9？ alert('1、您只能輸入1-9純數(shù)字；2、不能為空；'); return false;//若滿足任意一條件直接退出函數(shù)不往下走 } for(s=0;s<aTemp.length;s++){//循環(huán)判斷九宮格內(nèi)是否有重復(fù)數(shù)值，若是有重復(fù)直接推出函數(shù) if(val == aTemp[s]){ alert('不能重復(fù)輸入!'); return false; } } //上述判斷都滿足，則將當(dāng)前val的值放到數(shù)組aTemp中 aTemp.push(val); } //n后面所跟數(shù)字與上面圖片每個格子標(biāo)記的數(shù)值一致 //將橫向與縱向的值設(shè)置為0；其中n1-n3為橫向三個值，n4-n6為縱向三個值 var n1=0,n2=0,n3=0,n4=0,n5=0,n6=0, //n7、n8分別為兩對角值 n7=aTemp[0]+aTemp[4]+aTemp[8], n8=aTemp[2]+aTemp[4]+aTemp[6]; //橫向：分段相加值 for(i=0;i<3;i++)n1+=aTemp[i]; for(i=3;i<6;i++)n2+=aTemp[i]; for(i=6;i<9;i++)n3+=aTemp[i]; //縱向：因?yàn)榭v向是每隔兩個格子相加一次，所以正好用取模方式計(jì)算 for(i=0;i<9;i++){ (i%3==0) && (n4+=aTemp[i]);//當(dāng)i%3=0時，分別為格子0、3、6 (i%3==1) && (n5+=aTemp[i]);//當(dāng)i%3=1時，分別為格子1、4、7 (i%3==2) && (n6+=aTemp[i]);//當(dāng)i%3=1時，分別為格子2、5、8 } //判斷n1-n8各值是否都相等，當(dāng)然可以任意一個n判斷，不局限只與n1的值相等 n1==n2 && n1==n3 && n1==n4 && n1==n5 && n1==n6 && n1==n7 && n1==n8 ? alert('恭喜您輸入正確！') : alert('很遺憾您輸入錯誤！');}oBtn.onclick=isNum;執(zhí)行效果 1、當(dāng)輸入數(shù)值為非數(shù)字，或大于9，或小于0，或?yàn)榭諘r
2、當(dāng)輸入重復(fù)數(shù)字時
3、當(dāng)輸入正確時
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
