如何创建一个逻辑，以便在单击“立即旋转”按钮时旋转 3 个图像

Question

逻辑，用于在单击"立即旋转"按钮时旋转 3 个图像。

旋转完成后，用户根据旋转结果的顺序获得 200 点或 500 点。

1）当所有3张图像都相同时，用户将获得500积分，可用于兑换产品。2）当至少2张图片相同时，用户将获得200积分，可用于兑换产品。3）当没有一个是相同的显示失败消息。

以下是更改图像的代码。

<script>
var randomImage = new Array();
randomImage[0] = "images/01.jpg";
randomImage[1] = "images/02.jpg";
randomImage[2] = "images/03.jpg";
$(function() {
    $('.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random() * randomImage.length);
        $("#bg").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');
    });
    $('.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random() * randomImage.length);
        $("#bga").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');
    });
    $('.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random() * randomImage.length);
        $("#bgab").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');
    });
});
</script>

用户应该只能玩三次。当他第4次比赛时，应该要求他等待30分钟再次比赛。

Answer 1

请使用这个，这是最简单的演示代码。 您还需要添加逻辑。

 $(function () {
        var clickcount = 0;
        $('.click').click(function (e) {
            e.preventDefault();
                $('.click').attr('disabled','disabled');
                var number = Math.floor(Math.random() * randomImage.length);
                $("#bg").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');
                number = Math.floor(Math.random() * randomImage.length);
                $("#bga").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');
                number = Math.floor(Math.random() * randomImage.length);
                $("#bgab").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');
                var firstimage = $("#bg").find('img').attr('src').trim();
                var secondimage = $("#bga").find('img').attr('src').trim();
                var thirdimage = $("#bgab").find('img').attr('src').trim();
                if (firstimage == secondimage == thirdimage) {
                    // all match so point 500
                } else if (firstimage == secondimage || firstimage == thirdimage || secondimage == thirdimage) {
                    // two image match so point 200
                } else {
                    // nothing match
                }

                // Timeout function after 30 sec button will enable again
                setTimeout(function () {
                    $('.click').removeAttr('disabled');
                }, 1800000);

        });
    });

Answer 2

你应该添加像clickCounter这样的变量。尝试像这样：

$(window).load(function () {   
var clickCounter = 0;
var randomImage = ["images/01.jpg","images/02.jpg", "images/03.jpg"];
     $('#yourbuttonId').click(function(e) {
    ++clickCounter;
        var number = Math.floor(Math.random() * randomImage.length);
     switch(clickCounter)
     {
         case 1:
         ...your logic here break;
         case 2:
         ...your logic here break;
         case 3:
         ...your logic here break;
         default: ...your logic if > 3
         break;
    };
    });
});