JQ实现转盘抽奖的两种方式

作者: MaguaSize | 来源:发表于2016-10-19 15:08 被阅读0次

JQ实现转盘抽奖的两种方式
vue适配3到8个大转盘抽奖
微信小程序幸运大转盘制作教程
Android超简单实现九宫格抽奖
iOS动画--转盘动画
JS实现抽奖转盘
canvas实现转盘抽奖
小程序实现大转盘，九宫格抽奖，带跑马灯效果
Scratch—转盘抽奖
css 如何“画”一个抽奖转盘

<p>　　做这个转盘抽奖效果所用到的图片在文章的最下面提供给大家,转盘抽奖是各大电商网站上常见一种效果,去度娘上搜索了一下,大多数都是使用插件完成的,并不能满足我的要求所以在JQ 的基础上自己写了一个版本.</p>

<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js">
    </script>
    <!-- 这里是css部分 -->
    <style>
        #bg {
            width: 650px;
            height: 600px;
            margin: 0 auto;
            background: url(img/turntable-bg.jpg) no-repeat;
            position: relative;
        }
        
        img:nth-of-type(1) {
            position: absolute;
            z-index: 10;
            top: 155px;
            left: 247px;
        }
        
        img:nth-of-type(2) {
            position: absolute;
            z-index: 5;
            top: 60px;
            left: 116px;
        }
    </style>
</head>

<body>
    <!-- 这里是HTML结构部分 -->
    <div id="bg">
        <img src="img/pointer.png" alt="pointer" id="img1">
        <img src="img/turntable.png" alt="turntable" id="img2">
    </div>
    <!-- 这里是jq部分 -->
    <script>
        // 拿到两个img标签
        var oPointer = $("#img1");
        var oTurntable = $("#img2");
        // 旋转过每个奖项大约的角度
        var cat = 51.4;
        var num = 0;
        // 点击按钮后旋转没结束不允许第二次旋转
        var offOn = true;
        var temp = 0;
        document.title = "";
        // 点击方法
        oPointer.click(function() {
            if(offOn) {

                offOn = !offOn;
                ratating();
            }
        });

        function ratating() {

// var timer = null;
var rdm = 0;
// 随机计算出旋转的角度
rdm = Math.floor(Math.random() * (3600 - 3603 + 1) + 3603);
// 旋转
oTurntable.css({
transition: "all 4s",
transform: "rotate(" + (rdm + temp) + "deg)"
});
// 旋转后判断对应角度的奖项
setTimeout(function() {
offOn = !offOn;

                num = (rdm + temp) % 360;
                temp += rdm;
                if(num <= cat * 1) {
                    alert("4999元");

                } else if(num <= cat * 2) {
                    alert("条50元");

                } else if(num <= cat * 3) {
                    alert("10元");

                } else if(num <= cat * 4) {
                    alert("5元");

                } else if(num <= cat * 5) {
                    alert("免息服务");

                } else if(num <= cat * 6) {
                    alert("提交白金");

                } else if(num <= cat * 7) {
                    alert("未中奖");

                }
            }, 4000);

        }
    </script>
</body>

</html>
</pre>
<p>　　上面的这种方式是点击以后旋转到随机到的度数后自动停止,有时候我们的需求并不是这样,需要点击开始然后再次点击再结束旋转.这种方式看下面代码.</p>
<pre>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js">
    </script>
    <!-- 这里是css部分 -->
    <style>
        #bg {
            width: 650px;
            height: 600px;
            margin: 0 auto;
            background: url(img/turntable-bg.jpg) no-repeat;
            position: relative;
        }
        
        img:nth-of-type(1) {
            position: absolute;
            z-index: 10;
            top: 155px;
            left: 247px;
        }
        
        img:nth-of-type(2) {
            position: absolute;
            z-index: 5;
            top: 60px;
            left: 116px;
        }
    </style>
</head>

<body>
    <!-- 这里是HTML结构部分 -->
    <div id="bg">
        <img src="img/pointer.png" alt="pointer" id="img1">
        <img src="img/turntable.png" alt="turntable" id="img2">
    </div>
    <!-- 这里是jq部分 -->
    <script>
        var oPointer = $("#img1");
        var oTurntable = $("#img2");
        var cat = 51.4;

        var offOn = true;
        var num = 0;
        var time = null;
        var begin = 0;
        var speed = 0;
        var compare = true;
        
        oPointer.click(function() {
            if (compare) {
                
                if(offOn) {
                speed = 20;
                time = setInterval(function() {
                    begin += speed;
                    oTurntable.css({
                        transform: "rotate(" + (begin) + "deg)"
                    });
                }, 16);

            } else {
                compare = false;
                setTimeout(function() {
                    clearInterval(time);
                    time = setInterval(function() {
                        if(speed <= 0) {
                            compare = true;
                            clearInterval(time);
                            result(begin);
                            
                        }
                        begin += speed;
                        var spe = Math.random()*(0.4-0.2+0.1)+0.2;

// console.log(spe);
speed -= spe;
oTurntable.css({
transform: "rotate(" + (begin) + "deg)"
});
}, 16);
}, 500);

            }
            offOn = !offOn;
            }
        });

        function result(ac) {
            num = ac % 360;
            if(num <= cat * 1) {
                alert("4999元");

            } else if(num <= cat * 2) {
                alert("条50元");

            } else if(num <= cat * 3) {
                alert("10元");

            } else if(num <= cat * 4) {
                alert("5元");

            } else if(num <= cat * 5) {
                alert("免息服务");

            } else if(num <= cat * 6) {
                alert("提交白金");

            } else if(num <= cat * 7) {
                alert("未中奖");

            }
        }
    </script>
</body>

</html>
</pre>