九宮格抽獎停止位置的設定
阿新 • • 發佈:2019-02-04
控制九宮格抽獎停止
網上有很多文章介紹九宮格抽獎,最近在做一個活動,正好用到了九宮格抽獎。網上的文章中都提供了比較完整的js和html,只需要將js、html複製下來,新增需要的jQuery的引用(下載很簡單),放到環境中,幾乎都能跑起來。
但在開發中,發現一個問題,網上的js提供了九宮格旋轉的控制程式碼,同時也有一個隨機數的生產,來達到隨機抽獎的效果。而真正在開發中,這個隨機數它是交給使用者(開發人員)來控制的,也就是說,我們先生產一個隨機數,將我們自己生成的隨機數與我們自己設定的獎品對應好,再將我們的隨機數傳給它,進而控制九宮格的停止位置。
1.註釋部分程式碼(注掉,讓其失效)
} else if (lottery.times == lottery.cycle) {
// var index = Math.random() * (lottery.count) | 0;
// lottery.prize = index;
} else {</span>
2.設定 lottery.prize的值
// 中獎,獎品對應 var prize = -1; var content = ""; if (data.rewardid == "340") { lottery.prize = 0; prize = 0; content = "禮物A"; } else if (data.rewardid == "341") { lottery.prize = 1; prize = 1; content = "禮物B"; /* ... */ } else if (data.rewardid == "342") { lottery.prize = 2; prize = 2; content = "禮物C"; /* ... */ } else if (data.rewardid == "343") { lottery.prize = 3; prize = 3; content = "禮物D"; /* ... */ } else if (data.rewardid == "344") { lottery.prize = 4; prize = 4; content = "禮物E"; /* ... */ } else if (data.rewardid == "345") { lottery.prize = 5; prize = 5; content = "禮物F"; } else if (data.rewardid == "346") { lottery.prize = 6; prize = 6; content = "禮物G"; /* ... */ } else if (data.rewardid == "347") { lottery.prize = 7; prize = 7; content = "禮物H"; /* ... */ } // 設定 轉動節奏 lottery.speed = 100; // 呼叫 轉動效果 roll(); // 抽獎按鈕恢復可用狀態 click = true; var field = "恭喜您!中了"+content+"大獎!"; return false;</span>
這樣就能實現抽獎控制了。
在這裡,我有一個問題,就是,我曾試著往roll()方法中傳遞引數,這個引數的作用就是用於控制停止位置的,但失敗了。從語法邏輯上,感覺是行得通,實踐未達到效果。具體修改兩個位置:
(一):
// 設定 轉動節奏
lottery.speed = 100;
var stopPoint = prize;
roll(stopPoint);
// 抽獎按鈕恢復可用狀態
click = true;
var field = "恭喜您!中了"+content+"大獎!";
return false;</span>
(二)結果是:通過傳參法,無法實現控制,直接沒反應。有大神路過的,請指點一二。謝謝!function roll(stopPoint){ //…… } else if (lottery.times == lottery.cycle) { //var index = Math.random() * (lottery.count) | 0; lottery.prize = stopPoint; } else { //…… }</span>