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 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
php网页后退不再出现过期
2007/03/08 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
javascript的push使用指南
2014/12/05 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
python读取注册表中值的方法
2013/04/08 Python
Python下载指定页面上图片的方法
2016/05/12 Python
python的多重继承的理解
2017/08/06 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
企业管理部经理岗位职责
2013/12/24 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
《问银河》教学反思
2014/02/19 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript