与网上一般的例子,不同,加入了后台逻辑:

exports.lottery = function(req,res){
	var lottery = [1,2,3,4];
	var d = lottery[Math.floor( Math.random()*lottery.length )];
	var out = JSON.stringify({'code':'1000','lottery':d});
	return res.send(out);
}

后台逻辑写的有点简单,,,每个奖项的获奖概率都是一样的,实际工作中肯定不会这样的。


前端代码:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
    <title>转盘</title>
    <style>
    * {
        padding: 0;
        margin: 0
    }
    body {
        text-align: center
    }
    .ly-plate {
        position: relative;
        width: 509px;
        height: 509px;
        margin: 50px auto;
    }
    .rotate-bg {
        width: 509px;
        height: 509px;
        background: url(ly-plate.png);
        position: absolute;
        top: 0;
        left: 0
    }
    .ly-plate div.lottery-star {
        width: 214px;
        height: 214px;
        position: absolute;
        top: 150px;
        left: 147px;
        /*text-indent:-999em;
		overflow:hidden;
		background:url(rotate-static.png);
		-webkit-transform:rotate(0deg);*/
        
        outline: none
    }
    .ly-plate div.lottery-star #lotteryBtn {
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        *left: -107px
    }
    </style>
</head>

<body>
    <div class="ly-plate">
        <div class="rotate-bg"></div>
        <div class="lottery-star"><img src="rotate-static.png" id="lotteryBtn">
        </div>
    </div>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script src="jQueryRotate.2.2.js"></script>
<script src="jquery.easing.min.js"></script>

<script>
$(function() {

    var reward = {
        1: {
            text: '恭喜您抽中的一等奖',
            angle: [
                [316, 359]
            ]
        },
        2: {
            text: '恭喜您抽中的二等奖',
            angle: [
                [45, 90]
            ]
        },
        3: {
            text: '恭喜您抽中的三等奖',
            angle: [
                [181, 224]
            ]
        },
        4: {
            text: '很遗憾,这次您未抽中奖',
            angle: [
                [1, 45],
                [91, 134],
                [136, 179],
                [226, 269],
                [271, 314]
            ]
        }
    }

    function getRam(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }



    var timeOut = function() { //超时函数
        $("#lotteryBtn").rotate({
            angle: 0,
            duration: 10000,
            animateTo: 2180, //这里是设置请求超时后返回的角度,所以应该还是回到最原始的位置,2160是因为我要让它转6圈,就是360*6得来的
            callback: function() {
                alert('网络超时')
            }
        });
    };
    var rotateFunc = function(angle, text) { //awards:奖项,angle:奖项对应的角度
        $('#lotteryBtn').stopRotate();
        $("#lotteryBtn").rotate({
            angle: 0,
            duration: 5000,
            animateTo: angle + 1440 + 180, //angle是图片上各奖项对应的角度,1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^
            callback: function() {
                alert(text)
            }
        });
    };

    function rotateEvent() {
        $.ajax({
            url: '/ajax/demo/lottery',
            type: 'get',
            dataType: 'json',
            success: function(data) {
                var lottery = data.lottery;
                var res = reward[lottery];
                if (data.code != 1000 || !res) {
                    timeOut();
                    return;
                }
                var index = Math.floor(Math.random() * res.angle.length);
                var arr = res.angle[index];
                var angle = getRam(arr[0], arr[1]);
                rotateFunc(angle, res.text);
            },
            complete: function() {},
            error: function() {
                timeOut();
            }
        });
    }

    $("#lotteryBtn").rotate({
        bind: {
            click: rotateEvent
        }
    });
})
</script>

</html>


demo: