当前位置：Gxlcms > JavaScript > javascript实现九宫格相加数值相等_javascript技巧

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

时间：2021-07-01 10:21:17 帮助过：13人阅读

本文实例介绍了javascript实现九宫格的对应方法，分享给大家供大家参考，具体内容如下

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

2、输入数值不能重复；

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

4、数值不能为空；

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

解释：

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

横向三个值：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的实现的方法，一下是相关代码。