分享jquery抽獎小程式實作方法（程式碼）-小程式開發-PHP中文網

這篇文章主要介紹了jquery 抽獎小程式的相關資料,這裡提供了詳細的思路及實現代碼和實現效果圖，需要的朋友可以參考下

這些日子，到處都可以看到關於微信小程式的新聞或報到，在部落格花園寫關於微信小程式的也不少。但今天我要說的不是微信小程序，而是用簡單的jquery寫的一個好玩的抽獎小程序。最後介紹了後面關於抽獎小程式的一些後面更新的方向和Math.random的一些小知識。（最終結果保存在：http://runjs.cn/detail/rq3bbhto，點擊可查看效果）

#下面先看一個簡單的抽獎小程式的例子：

html：

<p class="g-lottery-box">
  <p class="g-lottery-img">
    <a class="playbtn" href="javascript:;" title="开始抽奖"></a>
  </p>
</p>

登入後複製

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() {
  $(&#39;#clik&#39;).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, &#39;恭喜您获得2000元理财金!&#39;);
    break;
  case 2:
    rotateFunc(2, 60, &#39;谢谢参与~再来一次吧~&#39;);
    break;
  case 3:
    rotateFunc(3, 120, &#39;恭喜您获得5200元理财金!&#39;);
    break;
  case 4:
    rotateFunc(4, 180, &#39;恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!&#39;);
    break;
  case 5:
    rotateFunc(5, 240, &#39;谢谢参与~再来一次吧~&#39;);
    break;
  case 6:
    rotateFunc(6, 300, &#39;恭喜您获得1000元理财金!&#39;);
    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;
  $(&#39;#clik&#39;).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){
  $(&#39;#ii&#39;).html(ii);

}

登入後複製

##思考六：當我們玩扣扣遊戲時，經常會看到有滾動螢幕提示剛剛有誰誰抽到了獎，我們該如何實現？

解決想法：這個需要我們在後台調數據，但是我們可以先自己設定數據並查看效果，我們也可以用Javascript中的
Date

<p class="mar">
<marquee><span id="time"></span>恭喜foodoir抽到京东e卡！！！！</marquee>
</p>

var now =new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var t = hours+":"+minutes+":"+seconds;
$(&#39;#time&#39;).html(t);

登入後複製

到這裡，我們的小程式的效果就成這樣了：

更多思考- -》我們也可以將改程序更完善。分享jquery抽獎小程式實作方法（程式碼）

　　1、在現有頁面中增加抽獎榜，將抽到獎的用戶和抽到獎的時間顯示出來，並且能夠自動刷新（AJAX技術實現）

　　2、增加登錄和註冊功能，註冊成功並登入後方可進行抽獎活動

　　3、對於抽到的獎，我們可以設定其連結點擊後可以進行到該獎可以使用的介面

　　4、…

或說我們這樣--》

　　1、在現有頁面中增加抽獎榜，將抽到獎的用戶和抽到獎的時間顯示出來，並且能夠自動刷新
　　2、抽到獎後，我們可以領取獎勵，前提是老用戶登陸後可以領取，而新用戶需要註冊後才能領取，並且新

用戶註冊

後還送三次抽獎機會。
　　3、登入完成後進入一個積分商城，有幾個排行榜（財富榜和兌換榜）還有可以兌換的等價替換物　　4、……
#關於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%，但现在发生碰撞的时间也太早了，所以我们的分析一定有什么地方出错了。之前已经证明循环周期长度是正确的，那么很有可能生成的随机数不是均匀分布的，一定有其他的结构影响了生成的序列。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

以上是分享jquery抽獎小程式實作方法（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！