js实现摇奖

实现摇奖功能

使用JavaScript实现摇奖功能可以通过随机数生成和动画效果结合完成。以下是一个简单的实现方法：

// 定义奖品列表
const prizes = ['一等奖', '二等奖', '三等奖', '谢谢参与'];
let isRolling = false;
let rollInterval;

function startRoll() {
  if (isRolling) return;

  isRolling = true;
  const resultElement = document.getElementById('result');

  // 清除之前的定时器
  if (rollInterval) clearInterval(rollInterval);

  // 设置滚动效果
  rollInterval = setInterval(() => {
    const randomIndex = Math.floor(Math.random() * prizes.length);
    resultElement.textContent = prizes[randomIndex];
  }, 100);

  // 3秒后停止
  setTimeout(() => {
    clearInterval(rollInterval);
    isRolling = false;
    // 最终结果
    const finalIndex = Math.floor(Math.random() * prizes.length);
    resultElement.textContent = prizes[finalIndex];
  }, 3000);
}

HTML部分

需要配合以下HTML代码：

<div id="lottery">
  <div id="result">等待抽奖</div>
  <button onclick="startRoll()">开始抽奖</button>
</div>

CSS样式

可以添加一些基本样式增强视觉效果：

#lottery {
  text-align: center;
  margin: 50px auto;
  width: 300px;
}

#result {
  font-size: 24px;
  height: 50px;
  line-height: 50px;
  margin: 20px 0;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

高级实现方案

如果需要更复杂的摇奖效果，可以考虑以下增强功能：

// 添加加速度效果
function enhancedStartRoll() {
  if (isRolling) return;

  isRolling = true;
  const resultElement = document.getElementById('result');
  let speed = 100; // 初始速度
  let duration = 0; // 持续时间

  rollInterval = setInterval(() => {
    const randomIndex = Math.floor(Math.random() * prizes.length);
    resultElement.textContent = prizes[randomIndex];

    duration += speed;
    // 逐渐减速
    if (duration > 2000) {
      speed += 50;
    }
  }, speed);

  setTimeout(() => {
    clearInterval(rollInterval);
    isRolling = false;
    const finalIndex = Math.floor(Math.random() * prizes.length);
    resultElement.textContent = prizes[finalIndex];
  }, 5000);
}

概率控制

如果需要设置不同奖品的中奖概率：

const weightedPrizes = [
  { name: '一等奖', probability: 0.01 },
  { name: '二等奖', probability: 0.09 },
  { name: '三等奖', probability: 0.2 },
  { name: '谢谢参与', probability: 0.7 }
];

function getRandomPrize() {
  const random = Math.random();
  let cumulativeProbability = 0;

  for (const prize of weightedPrizes) {
    cumulativeProbability += prize.probability;
    if (random <= cumulativeProbability) {
      return prize.name;
    }
  }

  return weightedPrizes[weightedPrizes.length - 1].name;
}

这些代码可以组合使用，根据实际需求调整动画效果、持续时间和概率分布，创建出符合要求的摇奖功能。