<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jscript/jquery-1.11.1.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.container {
position: relative;
360px;
height: 360px;
border: 1px solid gray;
}
.outer {
120px;
height: 120px;
float: left;
}
.item {
40px;
height: 40px;
border: 1px solid gray;
float: left;
box-sizing: border-box;
outline: none;
font-size: 24px;
text-align: center;
color: black;
}
.one {
background-color: lightyellow;
}
.two {
background-color: lightgreen;
}
.three {
background-color: lightblue;
}
.four {
background-color: lightblue;
}
.five {
background-color: lightyellow;
}
.six {
background-color: lightgreen;
}
.seven {
background-color: lightgreen;
}
.eight {
background-color: lightblue;
}
.nine {
background-color: lightyellow;
}
.error {
color: red;
}
</style>
</head>
<body>
<div class="container">
<input class="item one" type="text" maxlength="1" />
<input class="item one" type="text" maxlength="1" />
<input class="item one" type="text" maxlength="1" />
<input class="item two" type="text" maxlength="1" />
<input class="item two" type="text" maxlength="1" />
<input class="item two" type="text" maxlength="1" />
<input class="item three" type="text" maxlength="1" />
<input class="item three" type="text" maxlength="1" />
<input class="item three" type="text" maxlength="1" />
<input class="item one" type="text" maxlength="1" />
<input class="item one" type="text" maxlength="1" />
<input class="item one" type="text" maxlength="1" />
<input class="item two" type="text" maxlength="1" />
<input class="item two" type="text" maxlength="1" />
<input class="item two" type="text" maxlength="1" />
<input class="item three" type="text" maxlength="1" />
<input class="item three" type="text" maxlength="1" />
<input class="item three" type="text" maxlength="1" />
<input class="item one" type="text" maxlength="1" />
<input class="item one" type="text" maxlength="1" />
<input class="item one" type="text" maxlength="1" />
<input class="item two" type="text" maxlength="1" />
<input class="item two" type="text" maxlength="1" />
<input class="item two" type="text" maxlength="1" />
<input class="item three" type="text" maxlength="1" />
<input class="item three" type="text" maxlength="1" />
<input class="item three" type="text" maxlength="1" />
<input class="item four" type="text" maxlength="1" />
<input class="item four" type="text" maxlength="1" />
<input class="item four" type="text" maxlength="1" />
<input class="item five" type="text" maxlength="1" />
<input class="item five" type="text" maxlength="1" />
<input class="item five" type="text" maxlength="1" />
<input class="item six" type="text" maxlength="1" />
<input class="item six" type="text" maxlength="1" />
<input class="item six" type="text" maxlength="1" />
<input class="item four" type="text" maxlength="1" />
<input class="item four" type="text" maxlength="1" />
<input class="item four" type="text" maxlength="1" />
<input class="item five" type="text" maxlength="1" />
<input class="item five" type="text" maxlength="1" />
<input class="item five" type="text" maxlength="1" />
<input class="item six" type="text" maxlength="1" />
<input class="item six" type="text" maxlength="1" />
<input class="item six" type="text" maxlength="1" />
<input class="item four" type="text" maxlength="1" />
<input class="item four" type="text" maxlength="1" />
<input class="item four" type="text" maxlength="1" />
<input class="item five" type="text" maxlength="1" />
<input class="item five" type="text" maxlength="1" />
<input class="item five" type="text" maxlength="1" />
<input class="item six" type="text" maxlength="1" />
<input class="item six" type="text" maxlength="1" />
<input class="item six" type="text" maxlength="1" />
<input class="item seven" type="text" maxlength="1" />
<input class="item seven" type="text" maxlength="1" />
<input class="item seven" type="text" maxlength="1" />
<input class="item eight" type="text" maxlength="1" />
<input class="item eight" type="text" maxlength="1" />
<input class="item eight" type="text" maxlength="1" />
<input class="item nine" type="text" maxlength="1" />
<input class="item nine" type="text" maxlength="1" />
<input class="item nine" type="text" maxlength="1" />
<input class="item seven" type="text" maxlength="1" />
<input class="item seven" type="text" maxlength="1" />
<input class="item seven" type="text" maxlength="1" />
<input class="item eight" type="text" maxlength="1" />
<input class="item eight" type="text" maxlength="1" />
<input class="item eight" type="text" maxlength="1" />
<input class="item nine" type="text" maxlength="1" />
<input class="item nine" type="text" maxlength="1" />
<input class="item nine" type="text" maxlength="1" />
<input class="item seven" type="text" maxlength="1" />
<input class="item seven" type="text" maxlength="1" />
<input class="item seven" type="text" maxlength="1" />
<input class="item eight" type="text" maxlength="1" />
<input class="item eight" type="text" maxlength="1" />
<input class="item eight" type="text" maxlength="1" />
<input class="item nine" type="text" maxlength="1" />
<input class="item nine" type="text" maxlength="1" />
<input class="item nine" type="text" maxlength="1" />
</div>
</body>
</html>
<script type="text/javascript">
var arr = [
0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0
];
$(".item").each(function () {
$(this).bind("input propertychange", function () {
$(".item").removeClass("error");
var index = $(this).index();
if ($(this).val() == 0 || !parseInt($(this).val())) {
$(this).val("")
arr[index] =0;
}
else {
arr[index] = $(this).val();
}
check();
})
})
function check() {
$(".item").removeClass("error");
var flag = true;
var className = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
for (var n = 0; n < 9; n++) {
for (var i = n * 9; i < (n + 1) * 9; i++) {
for (var j = i + 1; j < (n + 1) * 9; j++) {
if (arr[i] == arr[j] && arr[i] != 0) {
addErrorClass(i);
addErrorClass(j);
}
}
}
for (var k = n; k < 81; k += 9) {
for (var l = k + 9; l < 81; l += 9) {
if (arr[k] == arr[l] && arr[k] != 0) {
addErrorClass(k);
addErrorClass(l);
}
}
}
getClassNameByIndex(className[n]);
}
}
function addErrorClass(s) {
$(".container").find(".item:eq(" + s + ")").addClass("error");
}
function getClassNameByIndex(ClassName) {
var s = [];
$("." + ClassName).each(function () {
s.push($(this).index())
})
for (var i = 0; i < s.length; i++) {
for (var j = i + 1; j < s.length; j++) {
if (arr[s[i]] == arr[s[j]] && arr[s[i]] != 0) {
addErrorClass(s[i]);
addErrorClass(s[j]);
}
}
}
}
</script>