前端之家收集整理的这篇文章主要介绍了
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,8]、[2,6]
实现过程:
很简单,和上面
图片一样,点击提交按钮开始判断。
1、布局
html部分:
Box">
提交
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;
}