jquery 抽獎(jiǎng)小程序?qū)崿F(xiàn)代碼

更新時(shí)間：2016年10月12日 14:15:47 投稿：lqh

這篇文章主要介紹了jquery 抽獎(jiǎng)小程序的相關(guān)資料,這里提供了詳細(xì)的思路及實(shí)現(xiàn)代碼和實(shí)現(xiàn)效果圖，需要的朋友可以參考下

用jquery實(shí)現(xiàn)抽獎(jiǎng)小程序

這些日子，到處都可以看到關(guān)于微信小程序的新聞或報(bào)到，在博客園中寫(xiě)關(guān)于微信小程序的也不少。但是今天我要說(shuō)的不是微信小程序，而是用簡(jiǎn)單的jquery寫(xiě)的一個(gè)好玩的抽獎(jiǎng)小程序。最后介紹了后面關(guān)于抽獎(jiǎng)小程序的一些后面更新的方向和Math.random的一些小知識(shí)。（最終結(jié)果保存在：http://runjs.cn/detail/rq3bbhto，點(diǎn)擊可查看效果）

下面先看一個(gè)簡(jiǎn)單的抽獎(jiǎng)小程序的例子：

html：

<div class="g-lottery-box">
  <div class="g-lottery-img">
    <a class="playbtn" href="javascript:;" title="開(kāi)始抽獎(jiǎng)"></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è)置為全局變量，容易出錯(cuò)

$(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("恭喜您抽到理財(cái)金2000元！");
    return;
  }else if(30 < raNum && raNum <= 90){
    alert("謝謝參與~再來(lái)一次吧~");
    return;
  }else if(90 < raNum && raNum <= 150){
    alert("恭喜您抽到理財(cái)金5200元！");
    return;
  }else if(150 < raNum && raNum <= 210){
    alert("恭喜您獲得100元京東E卡，將在次日以短信形式下發(fā)到您的手機(jī)上，請(qǐng)注意查收!");
    return;
  }else if(210 < raNum && raNum <= 270){
    alert("謝謝參與~再來(lái)一次吧~");
    return;
  }else if(270 < raNum && raNum <= 330){
    alert("恭喜您抽到理財(cái)金1000元！");
    return;
  }else if(330 < raNum && raNum <= 360){
    alert("恭喜您抽到理財(cái)金2000元！");
    return;
  }
}

關(guān)于小程序的一些思考：

思考一：在A()方法中用了很多if…else，讓代碼看上去不是那么的優(yōu)美，有沒(méi)有什么辦法可以讓代碼看上去又沒(méi)一點(diǎn)？

解決思路：用switch方法

switch(data) {
  case 1:
    rotateFunc(1, 0, '恭喜您獲得2000元理財(cái)金!');
    break;
  case 2:
    rotateFunc(2, 60, '謝謝參與~再來(lái)一次吧~');
    break;
  case 3:
    rotateFunc(3, 120, '恭喜您獲得5200元理財(cái)金!');
    break;
  case 4:
    rotateFunc(4, 180, '恭喜您獲得100元京東E卡，將在次日以短信形式下發(fā)到您的手機(jī)上，請(qǐng)注意查收!');
    break;
  case 5:
    rotateFunc(5, 240, '謝謝參與~再來(lái)一次吧~');
    break;
  case 6:
    rotateFunc(6, 300, '恭喜您獲得1000元理財(cái)金!');
    break;
}

//后面還需要定義函數(shù)rotateFunc，在這里直接使用另外一種方法來(lái)完成
var rotateFunc = function(awards, angle, text) {
  isture = true;
  $btn.stopRotate();
  $btn.rotate({
    angle: 0,
    duration: 4000, //旋轉(zhuǎn)時(shí)間
    animateTo: angle + 1440, //讓它根據(jù)得出來(lái)的結(jié)果加上1440度旋轉(zhuǎn)
    callback: function() {
      isture = false; // 標(biāo)志為 執(zhí)行完畢
      alert(text);
    }
  });
};

思考二：實(shí)際中的大轉(zhuǎn)盤(pán)可以轉(zhuǎn)好幾圈，而此時(shí)的效果轉(zhuǎn)了不到一圈，我想要看到轉(zhuǎn)幾圈的效果怎么辦？

解決思路：animateTo:raNum在這后面加上360乘以想要轉(zhuǎn)的圈數(shù)的結(jié)果，（以抽獎(jiǎng)三次為例）

animateTo:raNum+360*3

思考三：我們可不可以對(duì)抽獎(jiǎng)次數(shù)進(jìn)行限制？

解決思路：（以抽獎(jiǎng)三次為例）

$(function() {
  var i =0;
  $('#clik').click(function() {
    i++;
    if(i>3){
      alert("您的抽獎(jiǎng)機(jī)會(huì)已經(jīng)用完！");
    }
    //代碼省略
  });
});

思考四：按照前面的思路，按理說(shuō)每次抽獎(jiǎng)能中的概率為1/3，但是我們?cè)趯?shí)際中并不是那么的想讓用戶(hù)抽中，我們?cè)撛趺崔k？

解決思路：1、我們直接改變r(jià)aNum，（假如不想讓用戶(hù)獲得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ā)到您的手機(jī)上，請(qǐng)注意查收!");
    }else{
      raNum += 60;
    }
    return;
  }

思考五：對(duì)于抽獎(jiǎng)剩余次數(shù)，我們可不可以提醒用戶(hù)？

解決思路：創(chuàng)建一個(gè)新的變量，然后通過(guò)DOM方法顯示出來(lái)

<h3>歡迎來(lái)到foodoir抽獎(jiǎng)小程序，您還有<span id="ii">3</span>次抽獎(jiǎng)機(jī)會(huì)</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);

}

思考六：在我們玩扣扣游戲時(shí)，經(jīng)常會(huì)看到有滾動(dòng)屏提示剛剛有誰(shuí)誰(shuí)抽到了獎(jiǎng)，我們?cè)撊绾螌?shí)現(xiàn)？

解決思路：這個(gè)需要我們?cè)诤笈_(tái)調(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);

到這里，我們的小程序的效果就成這樣了：

點(diǎn)擊鏈接查看效果：http://runjs.cn/detail/rq3bbhto

更多思考--》我們還可以將改程序更完善。

　　1、在現(xiàn)有頁(yè)面中增加抽獎(jiǎng)榜，將抽到獎(jiǎng)的用戶(hù)和抽到獎(jiǎng)的時(shí)間顯示出來(lái)，并且能夠自動(dòng)刷新（AJAX技術(shù)實(shí)現(xiàn)）
　　2、增加登錄和注冊(cè)功能，注冊(cè)成功并登錄后方可進(jìn)行抽獎(jiǎng)活動(dòng)
　　3、對(duì)于抽到的獎(jiǎng)，我們可以設(shè)置其鏈接點(diǎn)擊后可以進(jìn)行到該獎(jiǎng)可以使用的界面
　　4、……

或者說(shuō)我們這樣--》

　　1、在現(xiàn)有頁(yè)面中增加抽獎(jiǎng)榜，將抽到獎(jiǎng)的用戶(hù)和抽到獎(jiǎng)的時(shí)間顯示出來(lái)，并且能夠自動(dòng)刷新
　　2、抽到獎(jiǎng)后，我們可以領(lǐng)取獎(jiǎng)勵(lì)，前提是老用戶(hù)登陸后可以領(lǐng)取，而新用戶(hù)需要注冊(cè)后才能領(lǐng)取，并且新用戶(hù)注冊(cè)后還送三次抽獎(jiǎng)機(jī)會(huì)。
　　3、登錄完成后進(jìn)入一個(gè)積分商城，有幾個(gè)排行榜（財(cái)富榜和兌換榜）還有可以?xún)稉Q的等價(jià)替換物
　　4、……

更多關(guān)于Math.random的小知識(shí)

關(guān)于Math.random()

　　ECMAScript 規(guī)范是這樣描述 Math.random() 的：“返回一個(gè)整數(shù)，該整數(shù)的取值范圍大于等于 0 而小于 1，瀏覽器開(kāi)發(fā)商使用自定義的算法或策略從該范圍內(nèi)實(shí)現(xiàn)均勻分布的隨機(jī)或偽隨機(jī)效果。”
　　顯然，規(guī)范中遺漏了大量的細(xì)節(jié)。首先，它沒(méi)有定義精度。由于 ECMAScript 使用 IEEE 754 雙精度浮點(diǎn)數(shù)存儲(chǔ)所有數(shù)值，所以理論上應(yīng)該有 53 位的精確度，即隨機(jī)數(shù)的隨機(jī)范圍是 [1/x^53, 2^53-1]，但實(shí)際上，V8 中的 Math.random() 只有 32 位精度，不過(guò)這已經(jīng)足夠我們用的了。
　　真正的問(wèn)題是規(guī)范放任瀏覽器開(kāi)發(fā)者自由實(shí)現(xiàn)該方法，且沒(méi)有限制最小的周期長(zhǎng)度，唯一對(duì)分布的要求也只是“近似均勻”。

關(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 源碼中對(duì)此有一段注釋?zhuān)骸半S機(jī)數(shù)生成器使用了 George Marsaglia 的 MWC 算法?！备鶕?jù)這段注釋?zhuān)覐墓雀杷阉鞯搅艘韵滦畔ⅲ?br />

George Marsaglia 是一個(gè)畢生致力于 PRNG 的數(shù)學(xué)家，他還開(kāi)發(fā)了用于測(cè)試隨機(jī)數(shù)生成質(zhì)量的工具Diehard tests
MWC（multiply-with-carry）是由 Marsaglia 發(fā)明的 PRNG 算法，非常類(lèi)似于 LCG（linear congruential generators，線性同余法），其優(yōu)勢(shì)在于生成的循環(huán)周期更長(zhǎng)，接近于 CPU 的循環(huán)周期。

　　不過(guò)，V8 PRNG 與經(jīng)典的 MWC 生成器并不相同，因?yàn)樗皇菍?duì) MWC 生成器的簡(jiǎn)單擴(kuò)展，而是組合使用了兩個(gè) MWC 子生成器（r0 和 r1），并最終拼接成一個(gè)隨機(jī)數(shù)。這里略過(guò)相關(guān)的數(shù)學(xué)計(jì)算，只說(shuō)結(jié)論，每個(gè)子生成器最長(zhǎng)的循環(huán)周期長(zhǎng)度都是 2^30，合并后為 2^60。

　　前面提到過(guò)，我們定義的標(biāo)識(shí)符有 2^132 種可能性，所以 V8 的 Math.random() 并不能滿(mǎn)足這一需求。盡管如此，我們?nèi)允褂迷摵瘮?shù)并假設(shè)生成的隨機(jī)數(shù)是均勻分布的，那么生成一億個(gè)標(biāo)識(shí)符后出現(xiàn)碰撞的可能性才只有 0.4%，但現(xiàn)在發(fā)生碰撞的時(shí)間也太早了，所以我們的分析一定有什么地方出錯(cuò)了。之前已經(jīng)證明循環(huán)周期長(zhǎng)度是正確的，那么很有可能生成的隨機(jī)數(shù)不是均勻分布的，一定有其他的結(jié)構(gòu)影響了生成的序列。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: