用jquery實現抽獎小程序
這些日子，到處都可以看到關於微信小程序的新聞或報到，在博客園中寫關於微信小程序的也不少。但是今天我要說的不是微信小程序，而是用簡單的jquery寫的一個好玩的抽獎小程序。最後介紹了後面關於抽獎小程序的一些後面更新的方向和Math.random的一些小知識。（最終結果保存在：http://runjs.cn/detail/rq3bbhto，點擊可查看效果）
下面先看一個簡單的抽獎小程序的例子：
html：
<div class="g-lottery-box">
<div class="g-lottery-img">
<a class="playbtn" href="javascript:;" title="開始抽獎"></a>
</div>
</div>
css：
*{margin: 0; padding: 0;}
.g-lottery-box {
width: 400px;
height: 400px;
margin-left: 30px;
position: relative;
background: url(images/0.gif) no-repeat;
margin: 0 auto;
}
.g-lottery-box .g-lottery-img {
width: 340px;
height: 340px;
position: relative;
background: url(images/1.png) no-repeat;
left: 30px;
top: 30px;
}
.g-lottery-box #clik {
width: 186px;
height: 186px;
position: absolute;
top: 77px;
left: 77px;
background: url(images/2.png) no-repeat;
}
js：
/* 注意引用的順序
* <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
* <script src="js/jquery.rotate.min.js" type="text/javascript" charset="utf-8"></script>
* <script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
*
* Creat By foodoir 2010-10-11
*
* */
var raNum;
//注意：要將raNum設置為全局變量，容易出錯
$(function() {
$('#clik').click(function() {
//
raNum = Math.random()*360;
$(this).rotate({
duration:3000,
angle:0,
animateTo:raNum+720+360,
callback:function(){
A();
}
});
});
});
function A(){
if(0 < raNum && raNum <= 30){
alert("恭喜您抽到理財金2000元！");
return;
}else if(30 < raNum && raNum <= 90){
alert("謝謝參與~再來一次吧~");
return;
}else if(90 < raNum && raNum <= 150){
alert("恭喜您抽到理財金5200元！");
return;
}else if(150 < raNum && raNum <= 210){
alert("恭喜您獲得100元京東E卡，將在次日以短信形式下發到您的手機上，請注意查收!");
return;
}else if(210 < raNum && raNum <= 270){
alert("謝謝參與~再來一次吧~");
return;
}else if(270 < raNum && raNum <= 330){
alert("恭喜您抽到理財金1000元！");
return;
}else if(330 < raNum && raNum <= 360){
alert("恭喜您抽到理財金2000元！");
return;
}
}
關於小程序的一些思考：
思考一：在A()方法中用了很多if…else，讓代碼看上去不是那麼的優美，有沒有什麼辦法可以讓代碼看上去又沒一點？
解決思路：用switch方法
switch(data) {
case 1:
rotateFunc(1, 0, '恭喜您獲得2000元理財金!');
break;
case 2:
rotateFunc(2, 60, '謝謝參與~再來一次吧~');
break;
case 3:
rotateFunc(3, 120, '恭喜您獲得5200元理財金!');
break;
case 4:
rotateFunc(4, 180, '恭喜您獲得100元京東E卡，將在次日以短信形式下發到您的手機上，請注意查收!');
break;
case 5:
rotateFunc(5, 240, '謝謝參與~再來一次吧~');
break;
case 6:
rotateFunc(6, 300, '恭喜您獲得1000元理財金!');
break;
}
//後面還需要定義函數rotateFunc，在這裡直接使用另外一種方法來完成
var rotateFunc = function(awards, angle, text) {
isture = true;
$btn.stopRotate();
$btn.rotate({
angle: 0,
duration: 4000, //旋轉時間
animateTo: angle + 1440, //讓它根據得出來的結果加上1440度旋轉
callback: function() {
isture = false; // 標志為 執行完畢
alert(text);
}
});
};
思考二：實際中的大轉盤可以轉好幾圈，而此時的效果轉了不到一圈，我想要看到轉幾圈的效果怎麼辦？
解決思路：animateTo:raNum在這後面加上360乘以想要轉的圈數的結果，（以抽獎三次為例）
animateTo:raNum+360*3
思考三：我們可不可以對抽獎次數進行限制？
解決思路：（以抽獎三次為例）
$(function() {
var i =0;
$('#clik').click(function() {
i++;
if(i>3){
alert("您的抽獎機會已經用完！");
}
//代碼省略
});
});
思考四：按照前面的思路，按理說每次抽獎能中的概率為1/3，但是我們在實際中並不是那麼的想讓用戶抽中，我們該怎麼辦？
解決思路：1、我們直接改變raNum，（假如不想讓用戶獲得e卡）
raNum = Math.random()*360;
if(150 < raNum && raNum <= 210){
raNum += 60;
}
2、我們修改判斷條件
else if(150 < raNum && raNum <= 210){
//再將概率減小到1%
var n = Math.random()*100;
if(n<1){
alert("恭喜您獲得100元京東E卡，將在次日以短信形式下發到您的手機上，請注意查收!");
}else{
raNum += 60;
}
return;
}
思考五：對於抽獎剩余次數，我們可不可以提醒用戶？
解決思路：創建一個新的變量，然後通過DOM方法顯示出來
<h3>歡迎來到foodoir抽獎小程序，您還有<span id="ii">3</span>次抽獎機會</h3>
h3{
text-align: center;
font-family: "微軟雅黑", "microsoft yahei";
line-height: 60px;
}
h3 span{
font-size: 40px;
line-height: 60px;
font-family: elephant;
display: inline-block;
padding: 5px 20px;
border: 2px solid red;
border-radius: 10px;
color: #f00;
background-color: yellow;
}
var ii = 3-i;
if(ii>=0){
$('#ii').html(ii);
}
思考六：在我們玩扣扣游戲時，經常會看到有滾動屏提示剛剛有誰誰抽到了獎，我們該如何實現？
解決思路：這個需要我們在後台調數據，但是我們可以先自己設置數據並查看效果，我們還可以用Javascript中的Date
<div class="mar">
<marquee><span id="time"></span>恭喜foodoir抽到京東e卡！！！！</marquee>
</div>
var now =new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var t = hours+":"+minutes+":"+seconds;
$('#time').html(t);
到這裡，我們的小程序的效果就成這樣了：
點擊鏈接查看效果：http://runjs.cn/detail/rq3bbhto
更多思考--》我們還可以將改程序更完善。
1、在現有頁面中增加抽獎榜，將抽到獎的用戶和抽到獎的時間顯示出來，並且能夠自動刷新（AJAX技術實現）
2、增加登錄和注冊功能，注冊成功並登錄後方可進行抽獎活動
3、對於抽到的獎，我們可以設置其鏈接點擊後可以進行到該獎可以使用的界面
4、……
或者說我們這樣--》
1、在現有頁面中增加抽獎榜，將抽到獎的用戶和抽到獎的時間顯示出來，並且能夠自動刷新
2、抽到獎後，我們可以領取獎勵，前提是老用戶登陸後可以領取，而新用戶需要注冊後才能領取，並且新用戶注冊後還送三次抽獎機會。
3、登錄完成後進入一個積分商城，有幾個排行榜（財富榜和兌換榜）還有可以兌換的等價替換物
4、……
更多關於Math.random的小知識
關於Math.random()
ECMAScript 規范是這樣描述 Math.random() 的：“返回一個整數，該整數的取值范圍大於等於 0 而小於 1，浏覽器開發商使用自定義的算法或策略從該范圍內實現均勻分布的隨機或偽隨機效果。”
顯然，規范中遺漏了大量的細節。首先，它沒有定義精度。由於 ECMAScript 使用 IEEE 754 雙精度浮點數存儲所有數值，所以理論上應該有 53 位的精確度，即隨機數的隨機范圍是 [1/x^53, 2^53-1]，但實際上，V8 中的 Math.random() 只有 32 位精度，不過這已經足夠我們用的了。
真正的問題是規范放任浏覽器開發者自由實現該方法，且沒有限制最小的周期長度，唯一對分布的要求也只是“近似均勻”。
關於8 PRNG（）
var MAX_RAND = Math.pow(2, 32);
var state = [seed(), seed()];
var mwc1616 = function mwc1616() {
var r0 = (18030 * (state[0] & 0xFFFF)) + (state[0] >>> 16) | 0;
var r1 = (36969 * (state[1] & 0xFFFF)) + (state[1] >>> 16) | 0;
state = [r0, r1];
var x = ((r0 << 16) + (r1 & 0xFFFF)) | 0;
if (x < 0) {
x = x + MAX_RAND;
}
return x / MAX_RAND;
}
上述代碼就是 V8 PRNG 的核心邏輯。在老版本的 V8 源碼中對此有一段注釋：“隨機數生成器使用了 George Marsaglia 的 MWC 算法。”根據這段注釋，我從谷歌搜索到了以下信息：
George Marsaglia 是一個畢生致力於 PRNG 的數學家，他還開發了用於測試隨機數生成質量的工具Diehard tests
MWC（multiply-with-carry）是由 Marsaglia 發明的 PRNG 算法，非常類似於 LCG（linear congruential generators，線性同余法），其優勢在於生成的循環周期更長，接近於 CPU 的循環周期。
不過，V8 PRNG 與經典的 MWC 生成器並不相同，因為它不是對 MWC 生成器的簡單擴展，而是組合使用了兩個 MWC 子生成器（r0 和 r1），並最終拼接成一個隨機數。這裡略過相關的數學計算，只說結論，每個子生成器最長的循環周期長度都是 2^30，合並後為 2^60。
前面提到過，我們定義的標識符有 2^132 種可能性，所以 V8 的 Math.random() 並不能滿足這一需求。盡管如此，我們仍使用該函數並假設生成的隨機數是均勻分布的，那麼生成一億個標識符後出現碰撞的可能性才只有 0.4%，但現在發生碰撞的時間也太早了，所以我們的分析一定有什麼地方出錯了。之前已經證明循環周期長度是正確的，那麼很有可能生成的隨機數不是均勻分布的，一定有其他的結構影響了生成的序列。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！