美文网首页让前端飞Web前端之路
HTML5抽奖转盘-CSS3超简单版本

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

作者: 前端_java爱好者 | 来源:发表于2020-06-30 15:01 被阅读0次

    核心思路

    采用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以上

    相关文章

      网友评论

        本文标题:HTML5抽奖转盘-CSS3超简单版本

        本文链接:https://www.haomeiwen.com/subject/vldxqktx.html