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 RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
js网页右下角提示框实例
Oct 14 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
详解微信小程序网络请求接口封装实例
May 02 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 生成WML页面方法详解
2009/08/09 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
实例讲解PHP表单
2020/06/10 PHP
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
查找iframe里元素的方法可传参
2013/09/11 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python数据结构之Array用法实例
2014/10/09 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python饼状图的绘制实例
2019/01/15 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
感恩节红领巾广播稿
2014/02/11 职场文书
社区活动策划方案
2014/08/21 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
请假条应该怎么写?
2019/06/24 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书