本文共 1587 字,大约阅读时间需要 5 分钟。
[Java教程]简易版九宫格相加数值相等
0 2016-02-24 00:00:10
九宫格的样子以及游戏想大家接触过,想当年也是玩了好多九宫格游戏,其中最经典的就是1-9这九个数字填进格子,横竖向、对角相加数值相等这个益智游戏了。今天,在一个qq群里有人问九宫格做法,我就突然想起干前端这么长时间还真的没做过九宫格。今天就把我做好的实例发上来,供看客们批评教育。当然这也是我的处女帖,好激动!
源码下载:http://files.cnblogs.com/files/web-cxn/%E4%B9%9D%E5%AE%AB%E6%A0%BC%E6%BA%90%E7%A0%81.rar
实现思路:
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部分:1
css部分:通过css3中属性实现。1 *{margin:0;padding:0;outline: none;} 2 html,body{ 3 height: 100%; 4 display: flex; 5 justify-content: center; 6 align-items: center; 7 } 8 .box{ 9 position: relative;10 width: 250px;11 margin:0 auto;12 }13 input{14 text-align: center;15 font: 40px/60px 'Microsoft YaHei';16 width: 30%;17 float:left;18 box-sizing:border-box19 }20 button{21 position: absolute;22 bottom:-30px;23 left: 50%;24 margin-left: -30px;25 width: 40px;26 }
2、接下来重点来了,js部分
之前已经说了js的实现的方法,一下是相关代码。1 var oBtn=document.getElementsByTagName('button')[0], 2 aInp=document.getElementsByTagName('input'); 3 function isNum(){ 4 var aTemp=[];//创建临时函数,一次存放九宫格中的数字 5 for(i=0;i9) {//判断当前输入框中数值是否是数字,是否小于1,是否大于9? 9 alert('1、您只能输入1-9纯数字;2、不能为空;');10 return false;//若满足任意一条件直接退出函数不往下走11 }12 for(s=0;s
执行效果
1、当输入数值为非数字,或大于9,或小于0,或为空时
2、当输入重复数字时
3、当输入正确时
源码下载:http://files.cnblogs.com/files/web-cxn/%E4%B9%9D%E5%AE%AB%E6%A0%BC%E6%BA%90%E7%A0%81.rar
本文网址:http://www.shaoqun.com/a/195955.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
0
转载地址:https://blog.csdn.net/weixin_32601635/article/details/114791863 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!