jquery.rotate.js可選抽獎次數和中獎內容的轉盤抽獎demo

時間 2019-11-14

標籤 jquery.rotate.js jquery rotate 可選抽獎次數中獎內容轉盤 demo 欄目 JQuery 简体版

原文原文鏈接

需求：javascript

最多能夠抽獎5次，並且，每次只會中「2000元理財金」或者「謝謝參與」，其它的不會抽中（哈哈，果真都是套路）。html

效果以下：java

1、頁面結構：jquery

 1 <div class="g-content">
 2     <div class="g-lottery-case">
 3         <div class="g-left">
 4             <h2>您已擁有<span class="playnum"></span>次抽獎機會，點擊馬上抽獎！~</h2>
 5             <div class="g-lottery-box">
 6                 <div class="g-lottery-img">
 7                 </div>
 8                 <a class="playbtn" href="javascript:;" title="開始抽獎"></a>
 9             </div>
10         </div>
11     </div>
12 </div>

標籤h2爲提示內容，.playnum是剩餘抽獎次數，.g-lottery-img是最外層的閃燈，.g-lottery-img是轉動的內容，.playbtn是點擊抽獎按鈕。web

這裏用的是jquery.rotate.js，因此要引入jquery而後引入jquery.rotate.js，百度一下很簡單的，沒幾個AIP。dom

2、簡單的樣式：ide

 1 <style>
 2     .g-content {
 3         width: 100%;
 4         background: #fbe3cc;
 5         height: auto;
 6         font-family: "微軟雅黑", "microsoft yahei";
 7     }
 8     .g-content .g-lottery-case {
 9         width: 500px;
10         margin: 0 auto;
11         overflow: hidden;
12     }
13     .g-content .g-lottery-case .g-left h2 {
14         font-size: 20px;
15         line-height: 32px;
16         font-weight: normal;
17         margin-left: 20px;
18     }
19     
20     .g-content .g-lottery-case .g-left {
21         width: 450px;
22         float: left;
23     }
24     .g-lottery-box {
25         width: 400px;
26         height: 400px;
27         margin-left: 30px;
28         position: relative;
29         background: url(ly-plate-c.gif) no-repeat;
30     }
31     .g-lottery-box .g-lottery-img {
32         width: 340px;
33         height: 340px;
34         position: relative;
35         background: url(bg-lottery.png) no-repeat;
36         left: 30px;
37         top: 30px;
38     }
39     .g-lottery-box .playbtn {
40         width: 186px;
41         height: 186px;
42         position: absolute;
43         top: 50%;
44         left: 50%;
45         margin-left: -94px;
46         margin-top: -94px;
47         background: url(playbtn.png) no-repeat;
48     }
49 </style>

樣式就定一下高度，居中一下，顯示一下背景圖片ui

3、JS代碼：url

 1 <script>
 2     $(function() {
 3         var $btn = $('.g-lottery-img');// 旋轉的div
 4         var playnum = 5; //初始次數，由後臺傳入
 5         $('.playnum').html(playnum);//顯示還剩下多少次抽獎機會
 6         var isture = 0;//是否正在抽獎
 7         var clickfunc = function() {
 8             var data = [1, 2, 3, 4, 5, 6];//抽獎
 9             //data爲隨機出來的結果，根據機率後的結果
10             data = data[Math.floor(Math.random() * data.length)];//1~6的隨機數
11             switch(data) {
12                 case 1:
13                     rotateFunc(1, 0, '恭喜您得到2000元理財金');
14                     break;
15                 case 2:
16                     rotateFunc(2, 0, '恭喜您得到2000元理財金2');
17                     break;
18                 case 3:
19                     rotateFunc(3, 0, '恭喜您得到2000元理財金3');
20                     break;
21                 case 4:
22                     rotateFunc(4, -60, '謝謝參與4');
23                     break;
24                 case 5:
25                     rotateFunc(5, 120, '謝謝參與5');
26                     break;
27                 case 6:
28                     rotateFunc(6, 120, '謝謝參與6');
29                     break;
30             }
31         }
32         $(".playbtn").click(function() {
33             if(isture) return; // 若是在執行就退出
34             isture = true; // 標誌爲 在執行
35             if(playnum <= 0) { //當抽獎次數爲0的時候執行
36                 alert("沒有次數了");
37                 $('.playnum').html(0);//次數顯示爲0
38                 isture = false;
39             } else { //還有次數就執行
40                 playnum = playnum - 1; //執行轉盤了則次數減1
41                 if(playnum <= 0) {
42                     playnum = 0;
43                 }
44                 $('.playnum').html(playnum);
45                 clickfunc();
46             }
47         });
48         var rotateFunc = function(awards, angle, text) {
49             isture = true;
50             $btn.stopRotate();
51             $btn.rotate({
52                 angle: 0,//旋轉的角度數
53                 duration: 4000, //旋轉時間
54                 animateTo: angle + 1440, //給定的角度,讓它根據得出來的結果加上1440度旋轉
55                 callback: function() {
56                     isture = false; // 標誌爲 執行完畢
57                     alert(text);
58                 }
59             });
60         };
61 
62     });
63 </script>

說到底就是用一個1~6的隨機數，而後把對應的角度值傳給jquery.rotate.js,它就會轉到相應的地方，最後作一下對應剩餘次數的判斷和修改。spa

最後全部代碼爲：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>抽獎</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <style>
    .g-content {
        width: 100%;
        background: #fbe3cc;
        height: auto;
        font-family: "微軟雅黑", "microsoft yahei";
    }
    .g-content .g-lottery-case {
        width: 500px;
        margin: 0 auto;
        overflow: hidden;
    }

    .g-content .g-lottery-case .g-left h2 {
        font-size: 20px;
        line-height: 32px;
        font-weight: normal;
        margin-left: 20px;
    }

    .g-content .g-lottery-case .g-left {
        width: 450px;
        float: left;
    }

    .g-lottery-box {
        width: 400px;
        height: 400px;
        margin-left: 30px;
        position: relative;
        background: url(ly-plate-c.gif) no-repeat;
    }

    .g-lottery-box .g-lottery-img {
        width: 340px;
        height: 340px;
        position: relative;
        background: url(bg-lottery.png) no-repeat;
        left: 30px;
        top: 30px;
    }

    .g-lottery-box .playbtn {
        width: 186px;
        height: 186px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -94px;
        margin-top: -94px;
        background: url(playbtn.png) no-repeat;
    }
    </style>
</head>
<body>
<div class="g-content">
    <div class="g-lottery-case">
        <div class="g-left">
            <h2>您已擁有<span class="playnum"></span>次抽獎機會，點擊馬上抽獎！~</h2>
            <div class="g-lottery-box">
                <div class="g-lottery-img">
                </div>
                <a class="playbtn" href="javascript:;" title="開始抽獎"></a>
            </div>
        </div>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="jsmin/jquery.rotate.min.js"></script>
<script>
$(function() {
    var $btn = $('.g-lottery-img');// 旋轉的div
    var playnum = 5; //初始次數，由後臺傳入
    $('.playnum').html(playnum);//顯示還剩下多少次抽獎機會
    var isture = 0;//是否正在抽獎
    var clickfunc = function() {
        var data = [1, 2, 3, 4, 5, 6];//抽獎
        //data爲隨機出來的結果，根據機率後的結果
        data = data[Math.floor(Math.random() * data.length)];//1~6的隨機數
        switch(data) {
            case 1:
                rotateFunc(1, 0, '恭喜您得到2000元理財金');
                break;
            case 2:
                rotateFunc(2, 0, '恭喜您得到2000元理財金2');
                break;
            case 3:
                rotateFunc(3, 0, '恭喜您得到2000元理財金3');
                break;
            case 4:
                rotateFunc(4, -60, '謝謝參與4');
                break;
            case 5:
                rotateFunc(5, 120, '謝謝參與5');
                break;
            case 6:
                rotateFunc(6, 120, '謝謝參與6');
                break;
        }
    }
    $(".playbtn").click(function() {
        if(isture) return; // 若是在執行就退出
        isture = true; // 標誌爲 在執行
        if(playnum <= 0) { //當抽獎次數爲0的時候執行
            alert("沒有次數了");
            $('.playnum').html(0);//次數顯示爲0
            isture = false;
        } else { //還有次數就執行
            playnum = playnum - 1; //執行轉盤了則次數減1
            if(playnum <= 0) {
                playnum = 0;
            }
            $('.playnum').html(playnum);
            clickfunc();
        }
    });
    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);
            }
        });
    };
});
</script>
</body>
</html>