没事写着玩 系列之 JQ连连看(很丑陋,很初级)
說明:(圖片自備, 名稱為 jpg[0,2].jpg? class為( one two three)對(duì)應(yīng) 前面的 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");
??????????????? //初次點(diǎn)擊
??????????????? if (imgClass == "null") {
??????????????????? imgClass = $(this).attr("class");
??????????????? }
??????????????? //兩次點(diǎn)的圖片相同
??????????????? if ($(this).attr("class") == imgClass) {
??????????????????? $(this).attr("state", "click");
??????????????? }
??????????????? else {//兩次點(diǎn)擊不同時(shí)
??????????????????? $("[state]").removeAttr("state");
??????????????????? $("#tishi").show("2000");
??????????????????? $("#errorCount").val("當(dāng)前錯(cuò)誤" + 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="兩次不一樣,請(qǐng)從新選擇從選" />
??? <input type="button" id="errorCount" style="font-size: 20px; color: Red; position: absolute;
??????? top: 0px; left: 300px;" count="0" value="當(dāng)前錯(cuò)誤0次" />
??? <table style="position: absolute; top: 40px;">
??? </table>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/Mr-Joe/archive/2012/03/19/2405507.html
總結(jié)
以上是生活随笔為你收集整理的没事写着玩 系列之 JQ连连看(很丑陋,很初级)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jqMobi + Android 试手
- 下一篇： 对IEnumerableT,IDicti