没事写着玩 系列之 JQ连连看(很丑陋,很初级)
说明:(图片自备, 名称为 jpg[0,2].jpg class为( one two three)对应 前面的 0,1,2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var imgClass = "null";
function hideTishi() {
if ($("#tishi").attr("display") == "block") {
$("#tishi").hide("1000");
}
}
// setInterval("hideTishi()", "2000");
var errorCounts = 0;
var rows = 7, columns = 7;
for (var i = 0; i < rows; i++) {
$("table").append("<tr></tr>");
for (var j = 0; j < columns; j++) {
var root = Math.random();
var s = root * 10;
var num = s % 2;
var classes = "";
switch (Math.round(num)) {
case 0: classes = "one"; break;
case 1: classes = "two"; break;
case 2: classes = "three"; break;
}
var html = "<td><img src=\"img/" + Math.round(num) + ".jpg\" class=\"" + classes + "\" /></td>";
$("table").find("tr:eq(" + i + ")").append(html);
}
}
$("img").click(function () {
$("#tishi").hide("1000");
//初次点击
if (imgClass == "null") {
imgClass = $(this).attr("class");
}
//两次点的图片相同
if ($(this).attr("class") == imgClass) {
$(this).attr("state", "click");
}
else {//两次点击不同时
$("[state]").removeAttr("state");
$("#tishi").show("2000");
$("#errorCount").val("当前错误" + parseInt(errorCounts + 1, 10) + "次");
errorCounts += 1;
imgClass = "null";
}
if ($("[state]").length > 1) {
while ($("[state]").length > 0) {
var img = $("[state]");
img.hide("1000");
img.removeAttr("state");
imgClass = "null";
jindu += 1;
}
}
})
})
</script>
<style type="text/css">
.one, .two, .three
{
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<input type="button" id="tishi" style="border: none; font-size: 20px; display: none;"
value="两次不一样,请从新选择从选" />
<input type="button" id="errorCount" style="font-size: 20px; color: Red; position: absolute;
top: 0px; left: 300px;" count="0" value="当前错误0次" />
<table style="position: absolute; top: 40px;">
</table>
</body>
</html>
