HTML5抽奖转盘-CSS3超简单版本

核心思路

采用CSS3的transition（过渡效果），给定需要旋转的元素设置transform的rotate属性的结束角度，同时添加transition-timing-function来控制旋转的速率包括起始速率和结束速率，代码如下（浏览器前缀可自行添加）：

 #pointer {
   transition: transform 6.5s;
   transition-timing-function: ease-in-out;
 }

 

这样，给定结束角度后，元素就会旋转，结束角度可以自由控制旋转的圈数，例如结束角度为angelEnd，即圈数m=angelEnd/360 并取整，前几圈转满360无需特殊处理，关键是最后一圈的角度决定了抽奖的结果，代码如下：

let base = 2160; //先转满360×6圈
     let result = getRandom(-30,330); // 最后一圈角度，获取-30到330的随机数
     let angelEnd = -(base+result)// 结束角度数，负数代表逆时针旋转
     $("#pointer").css({"transform":"rotate("+angelEnd+"deg)"});// 设置CSS

 

判断抽奖结果

通过监听旋转元素的transitionend获得动画结束的事件，在此回调中，可以判断抽奖结果，同时结合奖品数据及奖品的角度区间来计算，代码如下：

     gifts = {
       "1":{
           angleStart : -30,
           angleEnd : 30,
           tips : "恭喜您获得理财金2000元~~"
       },
       "2":{
           angleStart : 31,
           angleEnd : 90,
           tips : "恭喜您获得理财金1000元~~"
       },
       "3":{
           angleStart : 91,
           angleEnd : 150,
           tips : "很遗憾没有能中奖，再试一次吧~"
       },
       "4":{
           angleStart : 151,
           angleEnd : 210,
           tips : "恭喜您抽中京东E卡一张~"
       },
       "5":{
           angleStart : 211,
           angleEnd : 270,
           tips : "恭喜您获得理财金5200元~~"
       },
       "6":{
           angleStart : 271,
           angleEnd : 330,
           tips : "很遗憾没有能中奖，再试一次吧~"
       }
       
     $("#pointer").on('transitionend',function(){
         for (var key in gifts) {
           // 最后一圈的角度落在哪个奖品区间
           if (options.gifts[key].angleStart <= result && result<=options.gifts[key].angleEnd) {
             // 得到奖品的key值
             alert(options.gifts[key].tips);
           }
         }
     })

 

设定指定奖品

每个抽奖程序都可能预留内部接口，转盘也不例外，通过设置最后一圈的角度数即可提前设置奖品结果，代码如下：

 let _key = null; // 内定奖品id
 ​
 if (_key) {
   result = getRandom(gifts[_key].angleStart,gifts[_key].angleEnd)
 }

 

总结

对了，小编为大家准备了一套2020最新的web前端资料，需要点击下方链接获取方式

学习前端，你掌握这些。二线也能轻松拿8K以上