jq 抽奖转盘

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>抽奖</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <style>
            * {
                padding: 0;
                margin: 0;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -o-box-sizing: border-box;
                -ms-box-sizing: border-box;
                box-sizing: border-box;
                font-size: 100%;
            }
            
            .content {
                width: 100%;
                height: auto;
                background: url('./images/bg.png') no-repeat;
                background-size: 100% auto;
                position: relative;
            }
            
            .content .rotateBox {
                width: 100%;
                height: auto;
                margin-top: 25px;
                position: relative;
            }
            
            .content .rotateBox .bg {
                display: block;
                width: 100%;
                height: auto;
            }
            
            .content .rotateBox .star {
                display: inline-block;
                position: absolute;
                top: 49%;
                left: 51%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                width: 20%;
                height: 20%;
                background: url('./images/btn.png') center center no-repeat;
                background-size: 100%;
            }
            .content .rotateBox .show {
                position: absolute;
                top: 30%;
                left: 31%;
                width: 38%;
                height: 38%;
                background: url('./images/car.png') top center no-repeat;
                background-size: 40px auto;
            }
            
            .content .infor {
                width: 100%;
                margin-top: 25px;
                padding: 25px 30px 35px 40px;
                background: url('./images/bg2.png') no-repeat;
                background-size: 100% auto;
            }</style>
    </head>

    <body>
        <div class="content">
            <div class="rotateBox">
                <img src="./images/img.png" alt="" class="bg" />
                <span class="show"></span>
                <span class="star"></span>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
    <script>
        $(function() {
            var $btn = $('.show'); // 旋转的div
            var playnum = 1; //初始次数，由后台传入
//            $('.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;
                }
            }
            $(".star").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>
</html>
posted on 2017-12-08 16:07 梦幻飞雪阅读(400) 评论(0) 收藏举报