javascript实现九宫格相加数值相等_javascript技巧
程序员文章站
2022-04-04 14:04:19
...
本文实例介绍了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,或为空时
2、当输入重复数字时
3、当输入正确时
以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
推荐阅读
-
js实现连个数字相加而不是拼接的方法_javascript技巧
-
JS自定义功能函数实现动态添加网址参数修改网址参数值_javascript技巧
-
JS自定义功能函数实现动态添加网址参数修改网址参数值_javascript技巧
-
js实现两个值相加alert出来精确到指定位_javascript技巧
-
JavaScript实现给定时间相加天数的方法_javascript技巧
-
Javascript判断对象是否相等实现代码_javascript技巧
-
js实现两个值相加alert出来精确到指定位_javascript技巧
-
javascript实现一个数值加法函数_javascript技巧
-
基于javascript实现九宫格大转盘效果_javascript技巧
-
JavaScript实现给定时间相加天数的方法_javascript技巧