1. 程式人生 > >九宮格抽獎案例

九宮格抽獎案例

1.簡單佈局,就9張圖片,抽獎按鈕
2.在點選“抽獎”按鈕之後,開啟定時器。將九宮格九個獲獎資訊存入物件中,根據索引值設定提示內容(恭喜獲得xxx);
3.在定時器中,根據索引值讓每個圖片執行被選中的狀態。

 $("img").eq(index).addClass("cur");
$("img").eq(index).siblings().removeClass("cur");
index++;

4.獲取隨機值,必然是轉一圈再停下,人工設定:轉的個數total
然後在每個每次執行圖片狀態切換之後,total-1,當total為 0 的時候停止定時器。

 var total = parseInt(Math.random() * 10) + 9;

5.被選中的格子有個閃爍狀態。
人工設定:隱入再隱出。

$("img").eq(index-1).fadeOut(500).fadeIn(500);

測試案例:

 $(function () {
 // 1.設定背景圖片-----------------可以自由選擇操作手法。在html中操作也可以
    $("img").each(function (idx, ele) {
        // 1.1拼接圖片地址
        var url = "images/luck/0"+(idx+1)+".jpg";
        // 2.將圖片地址設定給img
        $(ele).attr("src", url);
    });
        var goods = {
            '0':'iPhone手機',
            '1':'程式設計師鼓勵師',
            '2':'紅牛耳機',
            '3':'iWatch',
            '4':'感謝參與',
            '5':'MacBook',
            '6':'布娃娃',
            '7':'機械鍵盤',
            '8':'江哥約會1次'
       };
            // 2.實現抽獎動畫
            $("p").click(function () {
                // 2.-1生成動畫執行次數
                var total = parseInt(Math.random() * 10) + 9;
				
                // 2.0定義變數當做動畫索引
                var index = 0;
                // 2.1開啟定時器
                var timer = setInterval(function () {
                    // 判斷是否是最後一個
                    if(index == 9){
                        index = 0;
                    }
                    // 2.2依次設定每個img的樣式為cur
                    $("img").eq(index).addClass("cur");
                    // 2.3清除其它img的樣式
                    $("img").eq(index).siblings().removeClass("cur");
                    // 2.4讓索引遞增
                    index++;
                    // 2.5讓執行次數遞減
                    total--;
                    console.log(total);
                    // 2.6判斷是否需要停止動畫
                    if(total == 0){
                        // 2.7關閉定時器
                        clearInterval(timer);
                        // 2.8中獎動畫
                        $("img").eq(index-1).fadeOut(500).fadeIn(500);
                        // 2.9彈出中獎結果
                       alert(goods[index - 1]);
                    }
                }, 50);
				});
        });