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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
JavaScript代码简化技巧实例解析
Sep 09 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&amp;MYSQL服务器配置说明
2006/10/09 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
详解PHP归并排序的实现
2016/10/18 PHP
ExtJs的Date格式字符代码
2010/12/30 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
vue中的过滤器实例代码详解
2019/06/06 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
python如何实现int函数的方法示例
2018/02/19 Python
python实现经纬度采样的示例代码
2020/12/10 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
上班玩手机检讨书
2014/02/17 职场文书
大学班级计划书
2014/04/29 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
户籍证明书标准模板
2014/09/10 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
推普标语口号大全
2015/12/26 职场文书
Golang二维数组的使用方式
2021/05/28 Golang