您的位置: 首页  >  文章  >  JS实现抽奖转盘

JS实现抽奖转盘

分类: 文章 • 2024-02-02 10:11:46
  • 超级简单的原理：
    点击转盘指针后随机得到一个数(每个数字对应一个奖项),并确定每个奖项在轮盘上的大概角度，然后调用 jqueryRotate.js插件来转动轮盘，并停在奖品的对应角度。
  • 使用的插件
    jquery.js
    jqueryRotate.js //旋转插件
    附赠链家：rotate.js使用说明 https://www.jianshu.com/p/b632a1ed6a57
  • 实现的效果

JS实现抽奖转盘

  • 实现代码

HTML

<html>
<head>
  <meta charset="utf-8" />
  <link href="css.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <div class="bg">
    <div class="pointer" id="pointer"><img src="images/pointer.png" /></div>
    <div class="turntable" id="turntable"><img src="images/turntable.png" /></div>
  </div>
  <script src="jquery-3.3.1.min.js" type="text/javascript" rel="stylesheet"></script>
  <script src="rotate.js" type="text/javascript" rel="stylesheet" ></script>
  <script src="js.js" type="text/javascript"></script>
</body>
</html>

CSS

<html>
<head>
  <meta charset="utf-8" />
  <link href="css.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <div class="bg">
    <div class="pointer" id="pointer"><img src="images/pointer.png" /></div>
    <div class="turntable" id="turntable"><img src="images/turntable.png" /></div>
  </div>
  <script src="jquery-3.3.1.min.js" type="text/javascript" rel="stylesheet"></script>
  <script src="rotate.js" type="text/javascript" rel="stylesheet" ></script>
  <script src="js.js" type="text/javascript"></script>
</body>
</html>

JS

$(function(){
  var bRotate=false;

  $("#pointer").click(function(){
    if(bRotate) return false;
    var item=rnd(0,10); //生成0~10的随机数
    console.log(item);
    switch(item){
      case 0:
        rotateFn(337,'未中奖');
        break;
      case 1:
        rotateFn(26, '免单4999元');
        break;
      case 2:
          rotateFn(88, '免单50元');
          break;
      case 3:
          rotateFn(137, '免单10元');
          break;
      case 4:
          rotateFn(185, '免单5元');
          break;
      case 5:
          rotateFn(185, '免单5元');
          break;
      case 6:
          rotateFn(235, '免分期服务费');
          break;
      case 7:
          rotateFn(287, '提高白条额度');
          break;
      case 8:   //增加"未中奖"概率
          rotateFn(337, '未中奖');
          break;
      case 9:
          rotateFn(337, '未中奖');
          break;
      case 10:
          rotateFn(0, 337, '未中奖');
          break;
    }
  })
  function rnd(n,m){
    var num=Math.floor(Math.floor(Math.random()*(m-n+1)+n))
    return num;
  }
  function rotateFn(angles,txt){  //控制轮盘在angle度停下
    bRotate=!bRotate;
    $('#turntable').stopRotate();
    $("#turntable").rotate({
      angle:0,                //旋转的角度
      animateTo:angles+1800,  //从当前角度旋转多少度
      duration:3000,          //持续时间
      callback:function(){    //回调函数
        alert(txt);
        bRotate=!bRotate;
      }
    })
  }
})

#####不知道朋友们有没有发现，这个抽奖转盘中奖率会不会太高了一点，这要是用于实际操作岂不是要亏到死，所以接下来我们就要改变它的中奖概率啦

方法一：

往前面的JS看，在case 8 ,9 ,10是不是都是在重复操作，这是在干什么呢？…最笨的方法，增加“未中奖”的
概率，通过增加随机数（原本只需要在07中选，现在在010中选，有4/11的可能性不中奖）来增加不中奖
的 可能性

方法二：

在0~7中抽取随机数的时候，如果抽到的是“1”（免单4999元），我就让它不要这个随机数，继续产生一个随
机数，如果又抽到“1”，我就还让他继续产生随机数，如果它还调皮继续是“1”，那么我就让它继续产生随机
数，一直到不是1就让它return。
说了这么多…还不如直接上代码

function rnd(n, m){
          var num=Math.floor(Math.random()*(m-n+1)+n) //在0~7中找一个随机数
          //设置概率
          if(num==0||num==4||num==5||num==7){
            return num;
          }
          else{
            num=Math.floor(Math.random()*(m-n+1)+n);
            if(num==0||num==4||num==5||num==7||num==3){
              return num;
            }
            else{
              num=Math.floor(Math.random()*(m-n+1)+n);
              if(num==0||num==4||num==5||num==7||num==3||num==2||num==6){
                return num
              }
              else{
                num=Math.floor(Math.random()*(m-n+1)+n);
                if(num==0||num==4||num==5||num==7||num==3||num==2||num==6){
                  return num
                }
                else{
                  num=Math.floor(Math.random()*(m-n+1)+n);
                  if(num==0||num==4||num==5||num==7||num==3||num==2||num==6){
                    return num
                  }
                  else{
                    num=Math.floor(Math.random()*(m-n+1)+n);  //抽到“免单4999元”的概率是1/117649
                    return num;
                  }
                }
              }
            }
          }
      }

这种方法有什么不好呢？相信大家能看出来，实在是太多冗余的代码了！！
######方法三
“方法三” = “方法一” + “方法二”
####不知道大家还有什么好的改变概率的方法，还请大佬们赐教 (●’◡’●)

相关推荐