Javascript는 9개의 정사각형 그리드 값을 동일하게 추가합니다.javascript 기술

본 글의 예시에서는 해당 Jiugongge를 JavaScript로 구현하는 방법을 소개하고 있으며, 참고하실 수 있도록 모두와 공유합니다

구현 아이디어:
1. 각 그리드에 입력되는 값은 숫자여야 합니다.

2. 입력한 값은 반복될 수 없습니다.

3. 입력 값은 1보다 작거나 9보다 클 수 없습니다.

4. 값은 비워둘 수 없습니다.

5. 가로 3개, 세로 3개, 대각선 2개 등 총 8가지 덧셈 방식이 있습니다. 자세한 내용은 다음과 같습니다.

설명:

각 그리드에 표시된 일련번호를 식별자로 사용하세요.

세 가지 수평 값: 0-2, 3-4, 6-8

세 가지 수직 값: [0,3,6], [1,4,7], [2,5,8]

대각선의 두 값: [0,4,8], [2,4,6]

구현 과정: 매우 간단합니다. 위의 그림처럼 제출 버튼을 클릭하면 심사가 시작됩니다.

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의 속성을 통해 구현됩니다.

*{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. 다음은 js 부분입니다

이전에 js의 구현 방법을 언급한 적이 있는데, 관련 코드는 다음과 같습니다.

var oBtn=document.getElementsByTagName('button')[0],
　　aInp=document.getElementsByTagName('input');
function isNum(){
　　var aTemp=[];//创建临时函数，一次存放九宫格中的数字
　　for(i=0;i<aInp.length;i++)
　　{
  var val=Number(aInp[i].value);
  if(isNaN(val) || val<1 || val>9) {//判断当前输入框中数值是否是数字，是否小于1，是否大于9？
  　　alert('1、您只能输入1-9纯数字；2、不能为空；');
  　　return false;//若满足任意一条件直接退出函数不往下走
  }
  for(s=0;s<aTemp.length;s++){//循环判断九宫格内是否有重复数值，若是有重复直接推出函数
  　　if(val == aTemp[s]){
  　　　　alert('不能重复输入!');
  　　　　return false;
  　　}
  }
  //上述判断都满足，则将当前val的值放到数组aTemp中
  aTemp.push(val);
　　}
　　//n后面所跟数字与上面图片每个格子标记的数值一致
　　//将横向与纵向的值设置为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];
　　//纵向：因为纵向是每隔两个格子相加一次，所以正好用取模方式计算
　　
　　for(i=0;i<9;i++){
  (i%3==0) && (n4+=aTemp[i]);//当i%3=0时，分别为格子0、3、6
  (i%3==1) && (n5+=aTemp[i]);//当i%3=1时，分别为格子1、4、7
  (i%3==2) && (n6+=aTemp[i]);//当i%3=1时，分别为格子2、5、8
　　}
　　//判断n1-n8各值是否都相等，当然可以任意一个n判断，不局限只与n1的值相等
　　n1==n2 && n1==n3 && n1==n4 && n1==n5 && n1==n6 && n1==n7 && n1==n8 &#63; alert('恭喜您输入正确！') : alert('很遗憾您输入错误！');
}
oBtn.onclick=isNum;执行效果

1. 입력값이 숫자가 아니거나, 9보다 크거나, 0보다 작거나, 비어 있는 경우

2. 반복되는 숫자를 입력할 때

3. 입력이 올바른 경우

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.