html js css抽奖大转盘

好的，以下是一个简单的抽奖大转盘的 HTML、CSS 和 JavaScript 代码：

HTML：

<div class="container">
  <div class="wheel">
    <div class="section"><span>1</span></div>
    <div class="section"><span>2</span></div>
    <div class="section"><span>3</span></div>
    <div class="section"><span>4</span></div>
    <div class="section"><span>5</span></div>
    <div class="section"><span>6</span></div>
  </div>
  <button class="spin-btn">Spin</button>
</div>

CSS：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.wheel {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 10px solid #444;
  overflow: hidden;
  transform: rotate(0deg);
  transition: transform 3s ease-in-out;
}

.section {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 300px, 300px, 150px);
  transform-origin: center center;
}

.section:nth-child(1) {
  transform: rotate(0deg);
  background-color: #f44336;
}

.section:nth-child(2) {
  transform: rotate(60deg);
  background-color: #e91e63;
}

.section:nth-child(3) {
  transform: rotate(120deg);
  background-color: #9c27b0;
}

.section:nth-child(4) {
  transform: rotate(180deg);
  background-color: #673ab7;
}

.section:nth-child(5) {
  transform: rotate(240deg);
  background-color: #3f51b5;
}

.section:nth-child(6) {
  transform: rotate(300deg);
  background-color: #2196f3;
}

.section span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-60deg);
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}

.spin-btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: bold;
  background-color: #2196f3;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.spin-btn:hover {
  background-color: #0d8bf2;
}

JavaScript：

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

spinBtn.addEventListener('click', () => {
  // Disable button during spin
  spinBtn.disabled = true;

  // Generate a random number from 1 to 6
  const deg = Math.floor(Math.random() * 360 + 1440);

  // Rotate the wheel
  wheel.style.transform = `rotate(${deg}deg)`;

  // Wait for the wheel to stop spinning
  setTimeout(() => {
    // Calculate the selected section based on the angle of rotation
    const selected = Math.floor((deg % 360) / 60);

    // Show the selected section in an alert
    alert(`You won section ${selected + 1}`);

    // Enable button after spin
    spinBtn.disabled = false;
  }, 4000);
});

这段代码创建了一个抽奖大转盘，包括一个包含六个扇形区域的圆形容器，一个旋转按钮和一些用于样式的 CSS 样式。

当用户点击旋转按钮时，JavaScript 代码将生成一个随机数来确定旋转的度数，并将容器旋转到该度数。然后，它会等待一段时间，直到容器停止旋转，然后根据旋转的角度计算出所选区域，并在警报框中显示所选区域的编号。最后，它会启用旋转按钮，以便用户可以再次进行旋转。