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 面向对象编程
Oct 28 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
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;#65279; str_replace
2011/03/23 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
php不写闭合标签的好处
2014/03/04 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
详解ES6中的let命令
2020/04/05 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
详解node.js 事件循环
2020/07/22 Javascript
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
化工专业应届生求职信
2013/11/08 职场文书
英语商务邀请函范文
2014/01/16 职场文书
五型班组建设方案
2014/02/10 职场文书
后勤主管岗位职责
2014/03/01 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
英语教研活动总结
2014/07/02 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
关于观后感的作文
2015/06/18 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
详解nodejs内置模块
2021/05/06 NodeJs
详解Vue3使用axios的配置教程
2022/04/29 Vue.js