自适应抽奖大转盘

前端入坑纪 63

作为一名oneplus的加油, 论坛每天的抽奖是少不了的. 那么今天来分享个仿一加的大转盘, 素材来自一加论坛大转盘.

好，详解如下！

OK，first things first！ 点我查看实际效果

抽奖大转盘

HTML 结构

<div class="dzp">
            <img src="wrap/img/bg.png" alt="">
            <div class="roller" id="roller"></div>
            <div class="zz" id="pin"></div>
 </div>

因为需要自适应布局,所以绝对布局是必须的.首先用大转盘背景图片bg.png撑开div.dzp,然后奖品图片和指针图片分别作为div.roller和div.zz的背景. 显然这两个div都是要绝对定位的

CSS 结构

比较基本的一些css,绝对定位啊,过渡效果啊.具体查看网页内css,这里不展开

JavaScript 结构

        var roller = document.getElementById('roller')
        var pin = document.getElementById('pin')
        var Bools = true;  // 用来控制动画过渡完成后,点击事件有效


        // 大转盘随机转动的效果函数
        function rollRound() {
            var randNum = Math.floor(Math.random() * 8 + 1)
            console.log('random number: ', randNum)
            roller.style.transition = ' all 2s ease-out'
            roller.style.transform = "rotateZ(" + (360 + randNum * 45) + "deg)"
            return randNum 
        }

        // 指针点击后执行的事件
        pin.addEventListener('click', function () {
            if (Bools) {
                var prizeNum = rollRound()
                Bools = false;

              // 2s后提示用户中奖,并将转盘回到最初的0度     
                setTimeout(function(){
                    Bools = true;
                    var slos = ''
                    if (prizeNum !== 4) {
                        slos = '恭喜您中得' + prizeNum + '号奖项!'
                    } else {
                        slos = '抱歉,您未中奖!'
                    }
                    alert(slos)
                    roller.style.transition = 'none'
                    roller.style.transform = "rotateZ(0deg)"
                }, 2000);
            }
        })

总结

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

*****作者原创内容,大家互相支持,谢谢!!!*****

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包