九宮格抽獎案例
阿新 • • 發佈:2018-12-17
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); }); });