当前位置：首页 > JavaScript

js实现大转盘

2026-01-30 11:59:39JavaScript

实现大转盘的基本思路

使用HTML、CSS和JavaScript创建一个可视化的大转盘效果。核心是通过CSS实现转盘样式，JavaScript控制旋转动画和结果判定。

HTML结构

<div class="wheel-container">
  <div class="wheel">
    <div class="wheel-item" data-value="1">奖品1</div>
    <div class="wheel-item" data-value="2">奖品2</div>
    <!-- 更多奖品项 -->
  </div>
  <button id="spin-btn">开始旋转</button>
</div>

CSS样式

.wheel-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
  transform: rotate(0deg);
}

.wheel-item {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
  text-align: center;
  line-height: 150px;
  font-size: 12px;
}

#spin-btn {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background: #ff5252;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript逻辑

document.getElementById('spin-btn').addEventListener('click', function() {
  const wheel = document.querySelector('.wheel');
  const items = document.querySelectorAll('.wheel-item');
  const itemCount = items.length;
  const anglePerItem = 360 / itemCount;

  // 随机选择奖品
  const selectedItem = Math.floor(Math.random() * itemCount);
  const extraRotations = 5; // 额外旋转圈数
  const targetAngle = 360 * extraRotations + (360 - anglePerItem * selectedItem);

  // 应用旋转动画
  wheel.style.transform = `rotate(${targetAngle}deg)`;

  // 旋转结束后处理
  setTimeout(() => {
    alert(`恭喜获得: ${items[selectedItem].textContent}`);
  }, 4000);
});

// 初始化转盘项位置
function initWheel() {
  const items = document.querySelectorAll('.wheel-item');
  const itemCount = items.length;
  const anglePerItem = 360 / itemCount;

  items.forEach((item, index) => {
    const angle = anglePerItem * index;
    item.style.transform = `rotate(${angle}deg) skewY(${90 - anglePerItem}deg)`;
    item.style.backgroundColor = `hsl(${angle}, 70%, 50%)`;
  });
}

initWheel();