转盘抽奖.JS

来源：互联网发布：apache 改变服务器地址编辑：程序博客网时间：2024/06/05 11:00

/// <reference path="_references.js" />

var i = 0;
$(function () {
    $("#zp").click(function () {
        i++
        if (i > 3)
        {
            alert("三次抽奖机会用完了");
            return;
        }
        var raNum = Math.random() * 360;//产生一个0~360之间的随机数
        if (247.5 < raNum && raNum <= 292.5 || 292.5 < raNum && raNum <= 337.5)
        {
            raNum = 10;
        }
        $(this).rotate({
            duration: 3000,
            angle: 0,
            animateTo: 720 + raNum,
            callback: function () {
                if (0 < raNum && raNum <= 22.5) {
                    alert("谢谢参与，您木有中奖");
                    return;
                }
                else if (22.5 < raNum && raNum <= 67.5) {
                    alert("恭喜，您中了5元代金券");
                    return;
                }
                else if (67.5 < raNum && raNum <= 112.5) {
                    alert("恭喜，您中了1元代金券");
                    return;
                }
                else if (112.5 < raNum && raNum <= 157.5) {
                    alert("恭喜，您中了10元代金券");
                    return;
                }
                else if (157.5 < raNum && raNum <= 202.5) {
                    alert("谢谢参与，您木有中奖");
                    return;
                }
                else if (202.5 < raNum && raNum <= 247.5) {
                    alert("恭喜，您中了20元代金券");
                    return;
                }
                else if (247.5 < raNum && raNum <= 292.5) {
                    alert("恭喜，您中了50元代金券");
                    return;
                }
                else if (292.5 < raNum && raNum <= 337.5) {
                    alert("恭喜，您中了30元代金券");
                    return;
                }
                else {
                    alert("谢谢参与，您木有中奖");
                    return;
                }
            }
        });
    });

});

// html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/demo.css" rel="stylesheet" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jQueryRotate.js"></script>
    <script src="js/demo.js"></script>
</head>
<body>
    <div id="bg"><img src="image/bg1.png" /></div>
    <div id="zp"><img src="image/arrow.png" /></div>
</body>
</html>

//css

body {
background-color:#c76a28;
}
#zp {
position:absolute;
top:114px;
left:189px;
cursor:pointer;
}

0 0