jquery 抽獎小程序?qū)崿F(xiàn)代碼
用jquery實現(xiàn)抽獎小程序
這些日子，到處都可以看到關(guān)于微信小程序的新聞或報到，在博客園中寫關(guān)于微信小程序的也不少。但是今天我要說的不是微信小程序，而是用簡單的jquery寫的一個好玩的抽獎小程序。最后介紹了后面關(guān)于抽獎小程序的一些后面更新的方向和Math.random的一些小知識。（最終結(jié)果保存在：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設(shè)置為全局變量，容易出錯
$(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卡，將在次日以短信形式下發(fā)到您的手機上，請注意查收!");
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;
}
}
關(guān)于小程序的一些思考：
思考一：在A()方法中用了很多if…else，讓代碼看上去不是那么的優(yōu)美，有沒有什么辦法可以讓代碼看上去又沒一點？
解決思路：用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卡，將在次日以短信形式下發(fā)到您的手機上，請注意查收!');
break;
case 5:
rotateFunc(5, 240, '謝謝參與~再來一次吧~');
break;
case 6:
rotateFunc(6, 300, '恭喜您獲得1000元理財金!');
break;
}
//后面還需要定義函數(shù)rotateFunc，在這里直接使用另外一種方法來完成
var rotateFunc = function(awards, angle, text) {
isture = true;
$btn.stopRotate();
$btn.rotate({
angle: 0,
duration: 4000, //旋轉(zhuǎn)時間
animateTo: angle + 1440, //讓它根據(jù)得出來的結(jié)果加上1440度旋轉(zhuǎn)
callback: function() {
isture = false; // 標志為 執(zhí)行完畢
alert(text);
}
});
};
思考二：實際中的大轉(zhuǎn)盤可以轉(zhuǎn)好幾圈，而此時的效果轉(zhuǎn)了不到一圈，我想要看到轉(zhuǎn)幾圈的效果怎么辦？
解決思路：animateTo:raNum在這后面加上360乘以想要轉(zhuǎn)的圈數(shù)的結(jié)果，（以抽獎三次為例）
animateTo:raNum+360*3
思考三：我們可不可以對抽獎次數(shù)進行限制？
解決思路：（以抽獎三次為例）
$(function() {
var i =0;
$('#clik').click(function() {
i++;
if(i>3){
alert("您的抽獎機會已經(jīng)用完！");
}
//代碼省略
});
});
思考四：按照前面的思路，按理說每次抽獎能中的概率為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卡，將在次日以短信形式下發(fā)到您的手機上，請注意查收!");
}else{
raNum += 60;
}
return;
}
思考五：對于抽獎剩余次數(shù)，我們可不可以提醒用戶？
解決思路：創(chuàng)建一個新的變量，然后通過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);
}
思考六：在我們玩扣扣游戲時，經(jīng)常會看到有滾動屏提示剛剛有誰誰抽到了獎，我們該如何實現(xiàn)？
解決思路：這個需要我們在后臺調(diào)數(shù)據(jù)，但是我們可以先自己設(shè)置數(shù)據(jù)并查看效果，我們還可以用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、在現(xiàn)有頁面中增加抽獎榜，將抽到獎的用戶和抽到獎的時間顯示出來，并且能夠自動刷新（AJAX技術(shù)實現(xiàn)）
2、增加登錄和注冊功能，注冊成功并登錄后方可進行抽獎活動
3、對于抽到的獎，我們可以設(shè)置其鏈接點擊后可以進行到該獎可以使用的界面
4、……
或者說我們這樣--》
1、在現(xiàn)有頁面中增加抽獎榜，將抽到獎的用戶和抽到獎的時間顯示出來，并且能夠自動刷新
2、抽到獎后，我們可以領(lǐng)取獎勵，前提是老用戶登陸后可以領(lǐng)取，而新用戶需要注冊后才能領(lǐng)取，并且新用戶注冊后還送三次抽獎機會。
3、登錄完成后進入一個積分商城，有幾個排行榜（財富榜和兌換榜）還有可以兌換的等價替換物
4、……
更多關(guān)于Math.random的小知識
關(guān)于Math.random()
ECMAScript 規(guī)范是這樣描述 Math.random() 的：“返回一個整數(shù)，該整數(shù)的取值范圍大于等于 0 而小于 1，瀏覽器開發(fā)商使用自定義的算法或策略從該范圍內(nèi)實現(xiàn)均勻分布的隨機或偽隨機效果。”
顯然，規(guī)范中遺漏了大量的細節(jié)。首先，它沒有定義精度。由于 ECMAScript 使用 IEEE 754 雙精度浮點數(shù)存儲所有數(shù)值，所以理論上應(yīng)該有 53 位的精確度，即隨機數(shù)的隨機范圍是 [1/x^53, 2^53-1]，但實際上，V8 中的 Math.random() 只有 32 位精度，不過這已經(jīng)足夠我們用的了。
真正的問題是規(guī)范放任瀏覽器開發(fā)者自由實現(xiàn)該方法，且沒有限制最小的周期長度，唯一對分布的要求也只是“近似均勻”。
關(guān)于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 源碼中對此有一段注釋：“隨機數(shù)生成器使用了 George Marsaglia 的 MWC 算法。”根據(jù)這段注釋，我從谷歌搜索到了以下信息：
George Marsaglia 是一個畢生致力于 PRNG 的數(shù)學(xué)家，他還開發(fā)了用于測試隨機數(shù)生成質(zhì)量的工具Diehard tests
MWC（multiply-with-carry）是由 Marsaglia 發(fā)明的 PRNG 算法，非常類似于 LCG（linear congruential generators，線性同余法），其優(yōu)勢在于生成的循環(huán)周期更長，接近于 CPU 的循環(huán)周期。
不過，V8 PRNG 與經(jīng)典的 MWC 生成器并不相同，因為它不是對 MWC 生成器的簡單擴展，而是組合使用了兩個 MWC 子生成器（r0 和 r1），并最終拼接成一個隨機數(shù)。這里略過相關(guān)的數(shù)學(xué)計算，只說結(jié)論，每個子生成器最長的循環(huán)周期長度都是 2^30，合并后為 2^60。
前面提到過，我們定義的標識符有 2^132 種可能性，所以 V8 的 Math.random() 并不能滿足這一需求。盡管如此，我們?nèi)允褂迷摵瘮?shù)并假設(shè)生成的隨機數(shù)是均勻分布的，那么生成一億個標識符后出現(xiàn)碰撞的可能性才只有 0.4%，但現(xiàn)在發(fā)生碰撞的時間也太早了，所以我們的分析一定有什么地方出錯了。之前已經(jīng)證明循環(huán)周期長度是正確的，那么很有可能生成的隨機數(shù)不是均勻分布的，一定有其他的結(jié)構(gòu)影響了生成的序列。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
Jquery Easyui日歷組件Calender使用詳解（23）
這篇文章主要為大家詳細介紹了Jquery Easyui日歷組件Calender的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了jquery選擇器排除某個DOM元素的方法,也就是在選中的一些元素中,過濾一些不需要的,使用jquery not選擇器實現(xiàn),需要的朋友可以參考下2014-04-04
淺談$(''div a'') 與$(''div>a'')的區(qū)別
下面小編就為大家?guī)硪黄獪\談$('div a') 與$('div>a')的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
下面小編就為大家?guī)硪黄胘query快速解決IE輸入框不能輸入的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
jQuery.fn.extend(object); 對jQuery.prototype進得擴展，就是為jQuery類添加“成員函數(shù)”。jQuery類的實例可以使用這個“成員函數(shù)”。2011-01-01
jQuery事件綁定on()、bind()與delegate() 方法詳解
這篇文章主要詳細介紹了jQuery事件綁定的三種方法，分別是on()、bind()與delegate()，十分的淺顯易懂，有需要的小伙伴可以參考下。2015-06-06
EasyUI使用DataGrid實現(xiàn)動態(tài)列數(shù)據(jù)綁定
這篇文章主要介紹了EasyUI使用DataGrid實現(xiàn)動態(tài)列數(shù)據(jù)綁定的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了jquery簡單圖片切換顯示效果實現(xiàn)方法,可以實現(xiàn)簡單的圖片切換功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)飛機大戰(zhàn)游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
jQuery 出現(xiàn)Cannot read property ‘msie’ of undefined錯誤的解決方法
這篇文章主要介紹了jQuery 出現(xiàn)Cannot read property ‘msie’ of undefined錯誤的解決方法的相關(guān)資料,需要的朋友可以參考下2016-11-11