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 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 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配合jquery实现增删操作具体实例
2013/12/12 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
javascript Keycode对照表
2009/10/24 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
vue计算属性computed的使用方法示例
2019/03/13 Javascript
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
python模块内置属性概念及实例
2021/02/18 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
水务局局长岗位职责
2013/11/28 职场文书
财务管理专业求职信
2014/06/11 职场文书
大一新生检讨书
2014/10/29 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
助学金感谢信
2015/01/20 职场文书
高中运动会广播稿
2015/08/19 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android