输出一段转盘抽奖的前端代码

下面是一个简单的转盘抽奖的前端代码示例：

HTML部分：

<div class="container">
  <div class="wheel"></div>
  <button class="spin-btn">SPIN</button>
</div>

CSS部分：

.container {
  position: relative;
}

.wheel {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #fc0;
}

.spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  font-size: 24px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript部分：

const wheel = document.querySelector('.wheel');
const spinBtn = document.querySelector('.spin-btn');

let deg = 0;

spinBtn.addEventListener('click', () => {
  // 随机生成一个旋转的角度
  const randomDeg = Math.floor(Math.random() * 360 + 3600);
  // 计算总的旋转角度
  deg += randomDeg;
  // 添加过渡效果
  wheel.style.transition = 'transform 3s ease-out';
  // 旋转转盘
  wheel.style.transform = `rotate(${deg}deg)`;
  // 监听过渡结束事件，重置过渡效果和角度
  wheel.addEventListener('transitionend', () => {
    wheel.style.transition = '';
    deg %= 360;
  });
});

以上代码实现了一个简单的转盘抽奖，点击SPIN按钮可以随机旋转转盘，旋转结束后会显示抽奖结果。当然，这只是一个简单的示例，实际的转盘抽奖还需要更多的功能和处理。