转盘抽奖.JS

最新推荐文章于 2019-03-18 15:27:44 发布

Bill11YAng

最新推荐文章于 2019-03-18 15:27:44 发布

阅读量485

点赞数

分类专栏： HTML5、CSS、JavaScript

HTML5、CSS、JavaScript 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

/// <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