javascript实现九宫格相加数值相等

这篇文章主要介绍了javascript实现九宫格相加数值相等的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例介绍了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的实现的方法，一下是相关代码。

 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，或为空时