单击SPIN NOW按钮时如何创建旋转3个图像的逻辑

时间:2015-06-12 07:35:46

标签: javascript php jquery html event-handling

在单击“旋转现在”按钮时旋转3个图像的逻辑。

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

1)当所有3张图像相同时,用户获得500点积分,可用于兑换产品。 2)当至少2张图像相同时,用户可以获得200点积分,用于兑换产品。 3)当没有相同的show failure消息时。

以下是更改图像的代码。

<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>

用户应该只能玩三次。当他第四次出场时,他应该被要求等待30分钟再次上场。

2 个答案:

答案 0 :(得分:0)

你应该像clickCounter一样添加变量。试试smth:

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

答案 1 :(得分:0)

请使用此,这是最简单的演示代码。你还需要添加你的逻辑。

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


        });

    });