master

分支 (1)

管理

管理

master

wheel_of_fortune
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery.min.js"></script>
    <script src="js/turntable.js"></script>
    <title>抽奖</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            width: 100%;
            min-width: 1920px;
            height: 100%;
            min-height: 920px;
        }

        .lottery {
            width: 100%;
            height: 100%;
            position: relative;
            display: inline-block;
            background:url(images/bgimg.png) no-repeat 0 0;
            background-size: 100% 100%;
        }

        .lottery img#start {
            position: absolute;
            top: 385px;
            right: 335px;
            margin-left: -76px;
            margin-top: -82px;
            cursor: pointer;
        }

        #needle{
            position: absolute;
            top: 200px;
            right: 472px;
            cursor: pointer;
        }

        /* #message {
            position: absolute;
            top: 0px;
            left: 10%;
        } */

        #myCanvas{
            position: relative;
            top: 65px;
            left: 53%;
        }
    </style>
    <!--[if lte IE 8]>
        <style>
            .lottery img{
                display: none;
            }
        </style>
    <![endif]-->
</head>

<body>
    <div class="lottery">
        <canvas id="myCanvas" width="800" height="800">
            当前浏览器版本过低，请使用其他浏览器尝试
        </canvas>
        <!-- <p id="message"></p> -->
        <img src="./images/start.png" id="start">
        <img src="./images/needle.png" id="needle">
    </div>

    <script>
        var wheelSurf
        // 初始化装盘数据 正常情况下应该由后台返回
        var initData = {
            "success": true,
            "list": [{
                    "id": 100,
                    "name": "一等奖",
                    "image": "./images/1.png",
                    "rank":1,
                    "percent":2
                },
                {
                    "id": 101,
                    "name": "二等奖",
                    "image": "./images/2.png",
                    "rank":2,
                    "percent":13
                },
                {
                    "id": 102,
                    "name": "三等奖",
                    "image": "./images/3.png",
                    "rank":3,
                    "percent":15
                },
                {
                    "id": 103,
                    "name": "再接再厉",
                    "image": "./images/4.png",
                    "rank":4,
                    "percent":30
                },
                {
                    "id": 104,
                    "name": "三等奖",
                    "image": "./images/5.png",
                    "rank":5,
                    "percent":10
                },
                {
                    "id": 105,
                    "name": "再接再厉",
                    "image": "./images/6.png",
                    "rank":6,
                    "percent":30
                }/*,
                {
                    "id": 106,
                    "name": "500元京东卡",
                    "image": "./images/7.png",
                    "rank":7,
                    "percent":10
                }*/
            ]
        }

        // 计算分配获奖概率(前提所有奖品概率相加100%)
        function getGift(){
            var percent = Math.random()*100
            var totalPercent = 0
            for(var i = 0 ,l = initData.list.length;i<l;i++){
                totalPercent += initData.list[i].percent
                if(percent<=totalPercent){
                    return initData.list[i]
                }
            }
        }

        var list = {}

        var angel = 360 / initData.list.length
        // 格式化成插件需要的奖品列表格式
        for (var i = 0, l = initData.list.length; i < l; i++) {
            list[initData.list[i].rank] = {
                id:initData.list[i].id,
                name: initData.list[i].name,
                image: initData.list[i].image
            }
        }
        // 查看奖品列表格式

        // 定义转盘奖品
        wheelSurf = $('#myCanvas').WheelSurf({
            list: list, // 奖品 列表，(必填)
            outerCircle: {
                color: '#df1e15' // 外圈颜色(可选)
            },
            innerCircle: {
                color: '#f4ad26' // 里圈颜色(可选)
            },
            dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
            disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5'], //中心奖盘的颜色，默认7彩(可选)
            title: {
                color: '#5c1e08',
                font: '38px Arial'
            } // 奖品标题样式(可选)
        })

        // 初始化转盘
        wheelSurf.init()
        // 抽奖
        var throttle = true;
        $("#start,#needle").on('click', function () {

            var winData = getGift() // 正常情况下获奖信息应该由后台返回

            /*$("#message").html('')*/
            if(!throttle){
                return false;
            }
            throttle = false;
            var count = 0
            // 计算奖品角度

            for (const key in list) {
                if (list.hasOwnProperty(key)) {
                    if (winData.id == list[key].id) {
                        break;
                    }
                    count++
                }
            }

            // 转盘抽奖，
            wheelSurf.lottery((count * angel + angel / 2), function () {
                /*$("#message").html(winData.name)*/
                throttle = true;
            })
        })


    </script>
</body>

</html>