javascript实现九宫格相加数值相等

 更新时间:2020年05月28日 08:28:29   作者:前端cheng_xiaona  
这篇文章主要介绍了javascript实现九宫格相加数值相等的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例介绍了javascript实现九宫格相加数值相等的对应方法,分享给大家供大家参考,具体内容如下

实现思路:

1、每个格子输入的数值必须为数字;

2、输入数值不能重复;

3、输入数值不能小于1或大于9;

4、数值不能为空;

5、相加方式共8个,分别为横向三个、纵向三个、两条对角线两个值。详情如下:

解释: 

       以每个格子所标记序号为标识:

      横向三个值: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,或为空时

2、当输入重复数字时

3、当输入正确时

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

相关文章

  • 微信小程序自定义toast的实现代码

    微信小程序自定义toast的实现代码

    这篇文章主要介绍了微信小程序自定义toast的实现代码,本文以toast为例通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • JavaScript创建防篡改对象的方法分析

    JavaScript创建防篡改对象的方法分析

    这篇文章主要介绍了JavaScript创建防篡改对象的方法,结合具体实例形式分析了javascript基于不可扩展对象、密封的对象和冻结的对象实现防篡改对象的相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • 微信小程序中获取用户手机号授权登录详细步骤

    微信小程序中获取用户手机号授权登录详细步骤

    这篇文章主要给大家介绍了关于微信小程序中获取用户手机号授权登录的详细步骤,在微信小程序中开发者可以通过微信提供的API接口实现用户登录和获取用户的手机号,需要的朋友可以参考下
    2023-07-07
  • 浅谈html转义及防止javascript注入攻击的方法

    浅谈html转义及防止javascript注入攻击的方法

    下面小编就为大家带来一篇浅谈html转义及防止javascript注入攻击的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • 深入了解Hybrid App技术的相关知识

    深入了解Hybrid App技术的相关知识

    这篇文章主要介绍了深入了解Hybrid App技术的相关知识,Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 ",需要的朋友可以参考下
    2019-07-07
  • JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)

    JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)

    在web前端开发中js中的作用域,提升,闭包知识是经常用到的也是很容易混淆的知识点,接下来小编整理了本教程帮助大家学习
    2016-09-09
  • 深入理解JavaScript系列(3) 全面解析Module模式

    深入理解JavaScript系列(3) 全面解析Module模式

    Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式
    2012-01-01
  • JS利用Intl解决前端日期和时间的格式化详解

    JS利用Intl解决前端日期和时间的格式化详解

    Intl 是一个全局对象,它的主要用途就是展示国际化信息,可以将字符串,数字和日期和时间转换为指定地区的格式。这篇文章就来和大家聊聊如何利用Intl解决前端日期和时间的格式化吧
    2023-03-03
  • js实现导航栏上下动画效果

    js实现导航栏上下动画效果

    这篇文章主要为大家详细介绍了js实现导航栏上下动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS实现搜索框文字可删除功能

    JS实现搜索框文字可删除功能

    本文给大家分享一段js代码实现搜索框文字可删除功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2016-12-12

最新评论