用jquery實現抽獎小程序
用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%，但現在發生碰撞的時間也太早了，所以我們的分析一定有什么地方出錯了。之前已經證明循環周期長度是正確的，那么很有可能生成的隨機數不是均勻分布的，一定有其他的結構影響了生成的序列。
后面的話：
現在還有很多東西都還處於理論階段，實際操作還沒跟上。（后面有能力了會更新的），歡迎大家一起討論。