用jquery實現抽獎小程序

時間  2019-11-09
標籤 jquery 實現 抽獎 程序 欄目 JQuery 简体版
原文   原文鏈接

用jquery實現抽獎小程序

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

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

html：css

<div class="g-lottery-box">
    <div class="g-lottery-img">
        <a class="playbtn" href="javascript:;" title="開始抽獎"></a>
    </div>
</div>

 

css：html

*{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：java

/* 注意引用的順序
 * <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方法jquery

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，可是咱們在實際中並非那麼的想讓用戶抽中，咱們該怎麼辦？

解決思路：一、咱們直接改變raNum，（假如不想讓用戶得到e卡）微信小程序

raNum = Math.random()*360;
if(150 < raNum && raNum <= 210){
    raNum += 60;
}

 

二、咱們修改判斷條件瀏覽器

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

更多思考--》咱們還能夠將改程序更完善。

　　一、在現有頁面中增長抽獎榜，將抽到獎的用戶和抽到獎的時間顯示出來，而且可以自動刷新（AJAX技術實現）
　　二、增長登陸和註冊功能，註冊成功並登陸後方可進行抽獎活動
　　三、對於抽到的獎，咱們能夠設置其連接點擊後能夠進行到該獎可使用的界面
　　四、……

或者說咱們這樣--》

　　一、在現有頁面中增長抽獎榜，將抽到獎的用戶和抽到獎的時間顯示出來，而且可以自動刷新
　　二、抽到獎後，咱們能夠領取獎勵，前提是老用戶登錄後能夠領取，而新用戶須要註冊後才能領取，而且新用戶註冊後還送三次抽獎機會。
　　三、登陸完成後進入一個積分商城，有幾個排行榜（財富榜和兌換榜）還有能夠兌換的等價替換物
　　四、……

更多關於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%，但如今發生碰撞的時間也太早了，因此咱們的分析必定有什麼地方出錯了。以前已經證實循環週期長度是正確的，那麼頗有可能生成的隨機數不是均勻分佈的，必定有其餘的結構影響了生成的序列。

後面的話：

　　如今還有不少東西都還處於理論階段，實際操做還沒跟上。（後面有能力了會更新的），歡迎你們一塊兒討論。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程