javascript實(shí)現(xiàn)九宮格相加數(shù)值相等
本文實(shí)例介紹了javascript實(shí)現(xiàn)九宮格相加數(shù)值相等的對應(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向是每隔兩個格子相加一次,所以正好用取模方式計算 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è)計有所幫助。
相關(guān)文章
JavaScript創(chuàng)建防篡改對象的方法分析
這篇文章主要介紹了JavaScript創(chuàng)建防篡改對象的方法,結(jié)合具體實(shí)例形式分析了javascript基于不可擴(kuò)展對象、密封的對象和凍結(jié)的對象實(shí)現(xiàn)防篡改對象的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12微信小程序中獲取用戶手機(jī)號授權(quán)登錄詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于微信小程序中獲取用戶手機(jī)號授權(quán)登錄的詳細(xì)步驟,在微信小程序中開發(fā)者可以通過微信提供的API接口實(shí)現(xiàn)用戶登錄和獲取用戶的手機(jī)號,需要的朋友可以參考下2023-07-07淺談html轉(zhuǎn)義及防止javascript注入攻擊的方法
下面小編就為大家?guī)硪黄獪\談html轉(zhuǎn)義及防止javascript注入攻擊的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12深入了解Hybrid App技術(shù)的相關(guān)知識
這篇文章主要介紹了深入了解Hybrid App技術(shù)的相關(guān)知識,Hybrid App(混合模式移動應(yīng)用)是指介于web-app、native-app這兩者之間的app,兼具" Native App良好用戶交互體驗(yàn)的優(yōu)勢 "和" Web App跨平臺開發(fā)的優(yōu)勢 ",需要的朋友可以參考下2019-07-07JavaScript中最容易混淆的作用域、提升、閉包知識詳解(推薦)
在web前端開發(fā)中js中的作用域,提升,閉包知識是經(jīng)常用到的也是很容易混淆的知識點(diǎn),接下來小編整理了本教程幫助大家學(xué)習(xí)2016-09-09深入理解JavaScript系列(3) 全面解析Module模式
Module模式是JavaScript編程中一個非常通用的模式,一般情況下,大家都知道基本用法,本文嘗試著給大家更多該模式的高級使用方式2012-01-01