1. 程式人生 > >九宮格抽獎停止位置的設定

九宮格抽獎停止位置的設定

控制九宮格抽獎停止

        網上有很多文章介紹九宮格抽獎,最近在做一個活動,正好用到了九宮格抽獎。網上的文章中都提供了比較完整的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>
結果是:通過傳參法,無法實現控制,直接沒反應。有大神路過的,請指點一二。謝謝!