In this paper, we introduce the corresponding method of JavaScript to realize nine Sudoku, and share them for everyone's reference, the specific contents are as follows
Realize the idea:
1, each lattice input value must be a number;
2, the input value can not be repeated;
3, the input value can not be less than 1 or greater than 9;
4, the value can not be empty;
5, add a total of 8, respectively, three horizontal, vertical three, two diagonal two values. Details are as follows:
Explain:
Identified by the marked serial number of each lattice:
Transverse three values: 0-2,3-4,6-8;
Longitudinal three values: [0,3,6], [1,4,7], [2,5,8];
Diagonal two values: [0,4,8], [2,4,6]
Implementation process:
Very simply, like the picture above, click the Submit button to start judging.
1, layout
HTML section:
<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> submit </button>
</div>
CSS section: implemented through CSS3 properties.
*{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, the next key to the JS section
Previously said JS implementation of the method, is related to the code.
var obtn=document.getelementsbytagname (' button ') [0], ainp=document.getelementsbytagname (' input ');
function Isnum () {var atemp=[];//creates a temporary function that holds the number for (i=0;i<ainp.length;i++) {var val=number (Ainp[i].value) in the nine grid one time;
if (isNaN (val) | | | val<1 | | val>9) {//Determine if the value in the current input box is a number, is less than 1, is greater than 9?
Alert (' 1, you can only enter 1-9 pure digits; 2; cannot be empty; '); Return false;//If you satisfy any of the conditions of the direct exit function does not go down} for (s=0;s<atemp.length;s++) {///loops to determine whether there are duplicate values in the nine, if there is a repeat directly eject the function if (val = = Atemp[s
] {alert (' cannot repeat input! ');
return false;
}///The above judgment is satisfied, place the value of the current Val in the array atemp Atemp.push (val); //n the following numbers correspond to the values of each lattice mark on the above picture//the horizontal and vertical values are set to 0, where n1-n3 is three values horizontally, N4-N6 is three values in portrait value var n1=0,n2=0,n3=0,n4=0,n5=0,n6=0,//n7, N8, respectively
Two diagonal values n7=atemp[0]+atemp[4]+atemp[8], n8=atemp[2]+atemp[4]+atemp[6];
Transverse: piecewise addition value 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];
Portrait: Because the portrait is added once every two squares, it is calculated for (i=0;i<9;i++) {(i%3==0) && (n4+=atemp[i) by the mode of modulo (0, 3, 6, respectively). (i%3==1) && (N5+=atemp[i])///when i%3=1, Lattice 1, 4, 7 (i%3==2) && (n6+=atemp[i));//When i%3=1, Lattice 2, 5, 8} respectively Determine whether the values of n1-n8 are equal, of course, can be any one n judgments, not limited to N1 values equal n1==n2 && n1==n3 && n1==n4 && n1==n5 && n1==n6 && n1==n7 && n1==n8? Alert (' Congratulations on your input right! : Alert (' Sorry you entered the error!
');
} obtn.onclick=isnum; execution effect
1, when the input value is not a number, or greater than 9, or less than 0, or empty
2. When you enter a duplicate number
3. When the input is correct
The above is the entire content of this article, I hope to learn JavaScript program to help you.