当前位置：首页 > JavaScript

js实现手机号码抽奖

2026-01-31 12:09:06JavaScript

实现手机号码抽奖的JavaScript代码

以下是一个简单的手机号码抽奖实现，包含随机抽取、去重和展示功能。

// 存储参与抽奖的手机号码
const phoneNumbers = [
  '13800138000',
  '13900139000',
  '15000150000',
  '15100151000',
  '18600186000'
];

// 存储已中奖的号码
const winners = [];

// 随机抽取一个手机号码
function drawLottery() {
  if (phoneNumbers.length === 0) {
    return '所有号码已抽完';
  }

  const randomIndex = Math.floor(Math.random() * phoneNumbers.length);
  const winner = phoneNumbers[randomIndex];

  // 从原始数组中移除中奖号码
  phoneNumbers.splice(randomIndex, 1);

  // 添加到中奖列表
  winners.push(winner);

  return winner;
}

// 示例使用
console.log('中奖号码:', drawLottery());
console.log('中奖号码:', drawLottery());
console.log('剩余号码:', phoneNumbers);
console.log('所有中奖者:', winners);

前端界面实现

对于网页端的抽奖展示，可以这样实现：

<!DOCTYPE html>
<html>
<head>
  <title>手机号码抽奖</title>
  <style>
    #lottery-container {
      text-align: center;
      margin-top: 50px;
    }
    #result {
      font-size: 24px;
      margin: 20px;
      min-height: 36px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="lottery-container">
    <h2>手机号码抽奖</h2>
    <div id="result"></div>
    <button onclick="draw()">开始抽奖</button>
    <h3>已中奖号码</h3>
    <div id="winners"></div>
  </div>

  <script>
    const phoneNumbers = [
      '13800138000',
      '13900139000',
      '15000150000',
      '15100151000',
      '18600186000'
    ];
    const winners = [];

    function draw() {
      if (phoneNumbers.length === 0) {
        document.getElementById('result').textContent = '所有号码已抽完';
        return;
      }

      const randomIndex = Math.floor(Math.random() * phoneNumbers.length);
      const winner = phoneNumbers[randomIndex];
      phoneNumbers.splice(randomIndex, 1);
      winners.push(winner);

      document.getElementById('result').textContent = `中奖号码: ${winner}`;
      updateWinnersList();
    }

    function updateWinnersList() {
      const winnersDiv = document.getElementById('winners');
      winnersDiv.innerHTML = winners.map(num => `<div>${num}</div>`).join('');
    }
  </script>
</body>
</html>

增强功能实现

为抽奖系统添加更多功能：

// 抽奖类
class Lottery {
  constructor(participants) {
    this.participants = [...participants];
    this.winners = [];
    this.prizeLevels = [];
  }

  // 设置奖项等级
  setPrizeLevels(levels) {
    this.prizeLevels = levels;
  }

  // 抽奖方法
  draw(prizeLevel) {
    if (this.participants.length === 0) {
      return { error: '没有更多参与者' };
    }

    const index = Math.floor(Math.random() * this.participants.length);
    const winner = this.participants[index];

    this.participants.splice(index, 1);
    this.winners.push({
      phone: winner,
      prize: prizeLevel
    });

    return {
      phone: winner,
      prize: prizeLevel
    };
  }

  // 批量抽奖
  batchDraw(count, prizeLevel) {
    const results = [];
    for (let i = 0; i < count && this.participants.length > 0; i++) {
      results.push(this.draw(prizeLevel));
    }
    return results;
  }
}

// 使用示例
const participants = [
  '13800138001',
  '13800138002',
  '13800138003',
  '13800138004',
  '13800138005'
];

const lottery = new Lottery(participants);
lottery.setPrizeLevels(['一等奖', '二等奖', '三等奖']);

console.log('抽奖结果:', lottery.draw('一等奖'));
console.log('批量抽奖:', lottery.batchDraw(2, '二等奖'));
console.log('剩余参与者:', lottery.participants);
console.log('所有中奖者:', lottery.winners);