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程序设计有所帮助。

赞 (0)

相关推荐

  • js实现九宫格的随机颜色跳转

    js实现九宫格的随机颜色跳转

    效果如下: 图(1)  初始图 图(2)  开始闪 代码如下: <!DOCTYPE html> <html> <head> <title>九宫格</title> <style type="text/css"> div{ width:190px; height:190px; background:#FFA600; float:left; margin:10px; border-radius: 10px; } body

  • js实现九宫格拼图小游戏

    js实现九宫格拼图小游戏

    效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100

  • javascript解三阶幻方（九宫格）

    谜题:三阶幻方, 试将1~9这9个不同整数填入一个3×3的表格,使得每行.每列以及每条对角线上的数字之和相同. 策略:穷举搜索.列出所有的整数填充方案,然后进行过滤. 亮点为递归函数getPermutation的设计,文章最后给出了几个非递归算法 // 递归算法,很巧妙,但太费资源 function getPermutation(arr) { if (arr.length == 1) { return [arr]; } var permutation = []; for (var i = 0;

  • javascript九宫格图片随机打乱位置的实现方法

    javascript九宫格图片随机打乱位置的实现方法

    今天就做个九宫格的简易拼图,最让我头疼的就是点击开始打乱图片位置.一开始在百度查看相关博客,走了很多弯路.最后看了众多的例子,自己写了个方法. <script> //打乱图片方法 function fun(){ var x = []; var y ; for(var i=1;i<10;i++){ var div = document.getElementById("d"+i+""); div.removeChild(document.getElem

  • JS模仿手机端九宫格登录功能实现代码

    JS模仿手机端九宫格登录功能实现代码

    最近没有项目做,闲来无事写了一个小demo,特此分享到我们平台,供大家参考下,本文写的不好还请各位大侠见谅! 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说直接上代码: js部分: 首先我们先画出两个九宫格,一个用于登录和首次设置滑动密码使用,另个用于再次设置滑动密码,用于与第一次输入的滑动密码进行对比,判断两次密码是否一致 第一个九宫格 $("#gesturepwd").GesturePasswd({ backgroundColor: "#25

  • javascript+canvas制作九宫格小程序

    js核心代码 复制代码 代码如下: /*  *canvasid:html canvas标签id  *imageid:html img 标签id  *gridcountX:x轴图片分割个数  *gridcountY:y轴图片分割个数  *gridspace:宫格空隙  *offsetX:x*y宫格相对canvas(0,0)X坐标偏移量  **offsetX:x*y宫格相对canvas(0,0)Y坐标偏移量  *isanimat:是否启用动画显示  */ function ImageGrid(can

  • js实现九宫格图片半透明渐显特效的方法

    本文实例讲述了js实现九宫格图片半透明渐显特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>九宫格图片半透明渐显效果</title> <body> <STYLE type=text/css>.invisible {  FILTER: alpha(opacity=0) } </STYLE> <SCRIPT language=JavaScript1.2> <!-- f

  • 基于javascript实现九宫格大转盘效果

    基于javascript实现九宫格大转盘效果

    本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>九宫格大转盘</title> <style type="text/css"> /*reset*/ *{ padding:0; margin:0} body{ height:

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

    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] 实现过程: 很简单,

  • JavaScript实现给定时间相加天数的方法

    本文实例讲述了JavaScript实现给定时间相加天数的方法.分享给大家供大家参考,具体如下: /** * 时间相加处理函数 * @param date 需要计算的时间(xxxx-xx-xx) * @param plusDays 要加的天数(整数) */ function calcuDate(date, plusDays) { var dateArray = date.split("-"); var year = +dateArray[0]; var month = +dateArra

  • JavaScript前端开发时数值运算的小技巧

    1.格式化金钱值 const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); const money = ThousandNum(20190214); // money => "20,190,214" 2.取整代替正数的Math.floor(),代替负数的Math.ceil() const num1 = ~~ 1.69; const num2 = 1.6

  • JavaScript实现九宫格点击变色效果

    JavaScript实现九宫格点击变色效果

    本文实例为大家分享了JavaScript实现九宫格点击变色效果的具体代码,供大家参考,具体内容如下 完成九宫格布局,实现点击任意格子之后改变该格子自身背景颜色. 首先使用表格完成九宫格框架: <table> <tr > <td></td> <td></td> <td></td> </tr> <tr > <td></td> <td></td>

  • JavaScript实现九宫格移动拼图游戏

    JavaScript实现九宫格移动拼图游戏

    本文实例为大家分享了JavaScript实现九宫格移动拼图游戏的具体代码,供大家参考,具体内容如下 效果图: 代码以及详细逻辑: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉

  • 原生JavaScript实现九宫格抽奖

    原生JavaScript实现九宫格抽奖

    本文实例为大家分享了JavaScript实现九宫格抽奖 的具体代码,供大家参考,具体内容如下 思路:通过移动背景颜色实现中奖信息,每一个方形元素,需要按顺序排列,加个延时器,当到最后一个的时候让它从0开始就可以动起来了,!! <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X

  • JavaScript实现九宫格抽奖

    JavaScript实现九宫格抽奖

    本文实例为大家分享了JavaScript实现九宫格抽奖的具体代码,供大家参考,具体内容如下 看到个抽奖案例,觉得还不错.就自己做了一个简单版本. 点击中间的开始,抽奖就会跑起来,速度由慢到快,再到慢,最后停下.停下的格子就是中奖的奖品. 主要思路: 1.抽奖的高亮色块轮循,使用一个 class 去控制. 2.要控制色块轮循的速度快慢,要用到计时器 setTimeout,可以控制轮循速度. 3.正在抽奖轮循的时候,开始按钮是不能点击的.所以要用一个变量判断当前是否正在轮循. 4.轮循的次数是一个随

  • JavaScript实现九宫格抽奖功能的示例代码

    JavaScript实现九宫格抽奖功能的示例代码

    目录 效果图 实现流程 主要代码 效果图 话不多说,直接上效果: 实现流程 主要流程为: 1. 根据效果图,构建静态页面 2. 获取元素(自带的属性) 3. 绑定事件 4. 事件触发之后 4.1 所有的li元素 在指定的时间间隔下 颜色随机变化 4.2 延时器 2秒后 清除定时器 4.3 在清除定时器之后,所有的li背景色复位,随机选一个 主要代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch

  • JavaScript实现九宫格拖拽效果

    JavaScript实现九宫格拖拽效果

    本文实例为大家分享了JavaScript实现九宫格拖拽效果的具体代码,供大家参考,具体内容如下 关于一些拼图游戏什么的,见人家效果做的不错,参考下别人写的代码,我也尝试着做了个. <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title></title>         <style type="t

随机推荐