没事写着玩系列之 JQ连连看(很丑陋,很初级)

最新推荐文章于 2022-09-20 13:47:19 发布

weixin_34310127

最新推荐文章于 2022-09-20 13:47:19 发布

阅读量86

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/Mr-Joe/archive/2012/03/19/2405507.html

版权

说明:(图片自备, 名称为 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>