欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript实现九宫格相加数值相等_javascript技巧

程序员文章站 2022-04-04 14:04:19
...
本文实例介绍了javascript实现九宫格的对应方法,分享给大家供大家参考,具体内容如下

实现思路:
1、每个格子输入的数值必须为数字;

2、输入数值不能重复;

3、输入数值不能小于1或大于9;

4、数值不能为空;

5、相加方式共8个,分别为横向三个、纵向三个、两条对角线两个值。详情如下:

javascript实现九宫格相加数值相等_javascript技巧

解释:

以每个格子所标记序号为标识:

横向三个值:0-2,3-4,6-8;

纵向三个值:[0,3,6]、[1,4,7]、[2,5,8];

对角线两个值:[0,4,8]、[2,4,6]

实现过程:
很简单,和上面图片一样,点击提交按钮开始判断。

1、布局
html部分:

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;i9) {//判断当前输入框中数值是否是数字,是否小于1,是否大于9?
    alert('1、您只能输入1-9纯数字;2、不能为空;');
    return false;//若满足任意一条件直接退出函数不往下走
  }
  for(s=0;s

1、当输入数值为非数字,或大于9,或小于0,或为空时

javascript实现九宫格相加数值相等_javascript技巧

2、当输入重复数字时

javascript实现九宫格相加数值相等_javascript技巧

3、当输入正确时

javascript实现九宫格相加数值相等_javascript技巧

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。