jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

下面是 “jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码”的完整攻略：

1. 安装jquery.rotate.js

在HTML头部导入jquery库和jquery.rotate.js库

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.rotate.js"></script>

2. HTML代码

在body部分添加代码如下，实现转盘布局：

<div id="fortune-wrapper">  
  <canvas id="roulette" width="500" height="500"></canvas>  
  <div id="chances"></div>  
  <div id="btnRoll">ROLL</div>
</div>

3. CSS代码

#fortune-wrapper {  
  width: 500px;  
  margin: auto;  
  text-align: center;  
  position: relative;  
  top: -18px;  
} 

#roulette {  
  position: absolute;  
  top: 0;  
  left: 0;  
} 

#chances {  
  position: absolute;  
  top: 180px;  
  left: 0;  
  right: 0;  
  margin: auto;  
  width:100%;  
  text-align:center;  
} 

#btnRoll {  
  width: 100px;  
  height: 100px;  
  line-height:100px;  
  background-color:yellowgreen;  
  color:#fff;  
  font-size: 20px;  
  border-radius: 50%;  
  text-align: center;  
  position: absolute;  
  bottom: 20px;  
  left: 50%;  
  margin-left: -50px;  
  cursor: pointer;  
}

4. JS代码

添加以下代码来实现抽奖转盘的设置：

var spin = 0;  //当前旋转位置
var startAngle = 0;  //旋转起点角度
var arc = Math.PI / (options.prizes.length / 2);  //将抽奖项分割的角度

$('#btnRoll').click(function() {
  var chances = parseInt($("#chances").text())

  if(chances <= 0) {
    alert('您的抽奖次数已用完')
    return
  }

  $("#chances").text(chances - 1)

  spin = Math.floor(Math.random() * options.prizes.length) + 1;
  var angle = winAngle(spin);
  $('#roulettte').rotate({
    animateTo: angle + 1800,  //旋转圈数
    duration: 8000,
    easing: $.easing.easeOutSine,
    callback: function() {
      alert(options.prizes[spin - 1])
    }
  })
})

//计算每个抽奖道的角度
function winAngle(spin) {
  return (startAngle + (spin - 1) * arc);
}

在以上代码中，我们存储了变量spin代表当前的抽奖位置，startAngle表示起点的角度，arc表示每个抽奖项的角度。当点击“Roll”按钮时，我们首先通过判断用户的可用抽奖次数来判断是否可以继续抽奖，如果抽奖次数用完了，就弹出提示框。接着我们将保存的spin变量设置为一个随机数，表示该次抽到的奖品位置。接着通过调用jquery.rotate.js库的rotate()方法，在动画中旋转转盘，并将结果回调到函数alert()里以弹出一个提示框，显示用户抽到的奖品。

示例1

以下是一个抽奖3次的示例代码：

var options = {
    prizes: ['100元代金券', '200元代金券', '500元代金券']
  };
$("#chances").text(3)

示例2

以下是一个抽奖1次，奖品有6个的示例代码：

var options = {
    prizes: ['1元红包', '2元红包', '5元红包', '10元红包', '健康宝', '贡献值']
};
$("#chances").text(1)