javascript實(shí)現(xiàn)九宮格相加數(shù)值相等

更新時(shí)間：2020年05月28日 08:28:29 作者：前端cheng_xiaona

這篇文章主要介紹了javascript實(shí)現(xiàn)九宮格相加數(shù)值相等的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例介紹了javascript實(shí)現(xiàn)九宮格相加數(shù)值相等的對(duì)應(yīng)方法，分享給大家供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)思路：

1、每個(gè)格子輸入的數(shù)值必須為數(shù)字；

2、輸入數(shù)值不能重復(fù)；

3、輸入數(shù)值不能小于1或大于9；

4、數(shù)值不能為空；

5、相加方式共8個(gè)，分別為橫向三個(gè)、縱向三個(gè)、兩條對(duì)角線兩個(gè)值。詳情如下：

解釋：

以每個(gè)格子所標(biāo)記序號(hào)為標(biāo)識(shí)：

橫向三個(gè)值：0-2，3-4，6-8；

縱向三個(gè)值：[0,3,6]、[1,4,7]、[2,5,8]；

對(duì)角線兩個(gè)值：[0,4,8]、[2,4,6]

實(shí)現(xiàn)過(guò)程：

很簡(jiǎ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部分：通過(guò)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、接下來(lái)重點(diǎn)來(lái)了，js部分

之前已經(jīng)說(shuō)了js的實(shí)現(xiàn)的方法，一下是相關(guān)代碼。

var oBtn=document.getElementsByTagName('button')[0],
　　aInp=document.getElementsByTagName('input');
function isNum(){
　　var aTemp=[];//創(chuàng)建臨時(shí)函數(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ù)字與上面圖片每個(gè)格子標(biāo)記的數(shù)值一致
　　//將橫向與縱向的值設(shè)置為0；其中n1-n3為橫向三個(gè)值，n4-n6為縱向三個(gè)值
　　var n1=0,n2=0,n3=0,n4=0,n5=0,n6=0,
　　//n7、n8分別為兩對(duì)角值
 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向是每隔兩個(gè)格子相加一次，所以正好用取模方式計(jì)算
　　
　　for(i=0;i<9;i++){
 (i%3==0) && (n4+=aTemp[i]);//當(dāng)i%3=0時(shí)，分別為格子0、3、6
 (i%3==1) && (n5+=aTemp[i]);//當(dāng)i%3=1時(shí)，分別為格子1、4、7
 (i%3==2) && (n6+=aTemp[i]);//當(dāng)i%3=1時(shí)，分別為格子2、5、8
　　}
　　//判斷n1-n8各值是否都相等，當(dāng)然可以任意一個(gè)n判斷，不局限只與n1的值相等
　　n1==n2 && n1==n3 && n1==n4 && n1==n5 && n1==n6 && n1==n7 && n1==n8 ? alert('恭喜您輸入正確！') : alert('很遺憾您輸入錯(cuò)誤！');
}
oBtn.onclick=isNum;執(zhí)行效果

1、當(dāng)輸入數(shù)值為非數(shù)字，或大于9，或小于0，或?yàn)榭諘r(shí)