九宫格的样子以及游戏想大家接触过,想当年也是玩了好多九宫格游戏,其中最经典的就是1-9这九个数字填进格子,横竖向、对角相加数值相等这个益智游戏了。今天,在一个qq群里有人问九宫格做法,我就突然想起干前端这么长时间还真的没做过九宫格。今天就把我做好的实例发上来,供看客们批评教育。当 ...
九宫格的样子以及游戏想大家接触过,想当年也是玩了好多九宫格游戏,其中最经典的就是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 <div class="box"> 2 <input type="text"> 3 <input type="text"> 4 <input type="text"> 5 <input type="text"> 6 <input type="text"> 7 <input type="text"> 8 <input type="text"> 9 <input type="text">10 <input type="text">11 <button>提交</button>12 </div>
原标题:简易版九宫格相加数值相等
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。