单击“立即旋转”按钮时如何创建旋转 3 个图像的逻辑

Question

单击立即旋转按钮时旋转 3 个图像的逻辑。

旋转完成后，用户将获得 200 点或 500 点，具体取决于旋转结果的顺序。

1) 当所有3张图片都相同时，用户将获得500积分，可用于兑换产品。 2) 当至少2张图片相同时，用户获得200积分，可用于兑换产品。 3) 当none相同时显示失败信息。

以下是换图代码。

<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

您应该添加像 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;
    };
    });
});

Answer 2

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

 $(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);


        });

    });

单击“立即旋转”按钮时如何创建旋转 3 个图像的逻辑

how to create a logic to spin the 3 images when the SPIN NOW button is clicked

html

javascript

php

jquery

event-handling