幸运大转盘

作者: w_wx_x | 来源:发表于2019-01-18 14:21 被阅读7次

微信小程序幸运大转盘制作教程
幸运大转盘
幸运大转盘
幸运大转盘
幸运大转盘
幸运大转盘
幸运大转盘
幸运大转盘
幸运大转盘
幸运大转盘

新年伊始，各种年会抽奖，那我们就来做一个简单版的大转盘，蹭一蹭节日的热闹气氛吧

效果如下：

效果图.gif

所需素材如下：

pointer.png

turntable.png

turntable-bg.jpg

我们开始吧！！！

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>抽奖</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.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="pointer" />
            <img src="img/turntable.png" alt="turntable" id="turntable" />
        </div>
        <!-- 这里是js部分 -->
        <script>
            // 拿到两个img
            var oPointer = $('#pointer')
            var oTurntable = $('#turntable')

            var cat = 360 / 7   // 旋转过每个奖项大约的角度
            var offOn = true    // 点击按钮后旋转没结束不允许第二次旋转
            var temp = 0         //  记录上一次旋转的角度

            // 点击开始抽奖
            oPointer.click(function() {
                if (offOn) {
                    offOn = !offOn
                    ratating()
                }
            })
                        // 转盘旋转
            function ratating() {
                var rdm = Math.floor(Math.random() * 3600) + 3600   // 随机计算出旋转的角度       
                                // 旋转动画     
                oTurntable.css({
                    transition: 'all 4s',
                    transform: 'rotate(' + (rdm + temp) + 'deg)'
                })
                // 旋转后，根据角度判断对应的奖项
                setTimeout(function() {
                    offOn = !offOn
                    temp = (rdm + temp) % 360     // 求余，算出在哪个奖项
                    if (temp <= cat * 1) {
                        alert('4999元')
                    } else if (temp <= cat * 2) {
                        alert('免单50元')
                    } else if (temp <= cat * 3) {
                        alert('免单10元')
                    } else if (temp <= cat * 4) {
                        alert('免单5元')
                    } else if (temp <= cat * 5) {
                        alert('免分期服务费')
                    } else if (temp <= cat * 6) {
                        alert('提高白条额度')
                    } else if (temp <= cat * 7) {
                        alert('未中奖')
                    }
                    oTurntable.css({
                        transition: 'all 0s',
                        transform: 'rotate(' + temp + 'deg)'
                    })
                }, 4000)
            }
        </script>
    </body>
</html>

你们还有什么好的实现方式分享一下，一起学习