JS特效第90弹：jQuery年终转盘抽奖代码

以下是一个简化的jQuery年终转盘抽奖代码示例，用于实现点击按钮后在转盘上随机停止，并显示中奖信息。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Year-End Lottery Wheel</title>
<style>
  #wheel {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #e3e3e3;
    position: relative;
    margin: 0 auto;
  }
  #wheel .segment {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    background: #f2f2f2;
  }
  #wheel .pointer {
    width: 20px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -10px;
    background: #000;
    border-radius: 5px;
    transform: rotate(0deg);
    transform-origin: center;
    animation: spin 5s linear infinite;
  }
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>
 
<button id="spin">Spin the Wheel</button>
<div id="wheel">
  <div class="pointer"></div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  var segments = 360; // 一共有360个段
  var randomNumber = 0; // 随机数初始化
 
  $('#spin').click(function() {
    // 停止之前正在进行的转动
    $('#wheel .pointer').css('animation', 'none');
    
    // 在下次重绘之后更新动画
    setTimeout(function() {
      randomNumber = Math.random() * segments; // 生成一个随机数
      $('#wheel .pointer').css('animation', 'spin 5s linear infinite').css('transform', 'rotate(' + randomNumber + 'deg)');
    }, 0);
  });
});
</script>
 
</body>
</html>

这段代码实现了基本的转盘抽奖功能，点击按钮后转盘会停在随机位置。这里使用了CSS动画来实现转盘旋转，并在JavaScript中通过修改转盘的旋转角度来让它停在指定的位置。

JS特效第90弹：jQuery年终转盘抽奖代码

评论已关闭

推荐阅读