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


Posted in Javascript onMay 28, 2020

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

实现思路:

1、每个格子输入的数值必须为数字;

2、输入数值不能重复;

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

4、数值不能为空;

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

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

解释: 

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

      横向三个值: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 ? alert('恭喜您输入正确!') : alert('很遗憾您输入错误!');
}
oBtn.onclick=isNum;执行效果

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

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

2、当输入重复数字时

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

3、当输入正确时

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

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

Javascript 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
node.js部署之启动后台运行forever的方法
May 23 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
Javascript类型转换的规则实例解析
Feb 23 #Javascript
理解Javascript图片预加载
Feb 23 #Javascript
Bootstarp风格的toggle效果分享
Feb 23 #Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 #Javascript
javascript瀑布流式图片懒加载实例
Jun 28 #Javascript
Bootstrap创建可折叠的组件
Feb 23 #Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 #Javascript
You might like
PHP htmlentities()函数用法讲解
2019/02/25 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
Js中sort()方法的用法
2006/11/04 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
js实现筛选功能
2020/11/24 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python使用functools实现注解同步方法
2018/02/06 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
HTML5 解析规则分析
2009/08/14 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
资产经营总监岗位职责
2013/12/04 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
销售口号大全
2014/06/11 职场文书
公证委托书
2014/08/01 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
python非标准时间的转换
2021/07/25 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技