当前位置：首页 > JavaScript

js 实现抽奖

2026-03-15 11:41:03JavaScript

实现抽奖功能的基本思路

抽奖功能的核心在于随机选择获奖者或奖项。在JavaScript中，可以利用 Math.random() 生成随机数，结合数组操作实现抽奖逻辑。

简单抽奖实现

假设有一个参与者数组和一个奖项数组，随机选择获奖者：

js 实现抽奖

const participants = ['Alice', 'Bob', 'Charlie', 'Diana'];
const prizes = ['一等奖', '二等奖', '三等奖'];

function drawLottery() {
    const winnerIndex = Math.floor(Math.random() * participants.length);
    const prizeIndex = Math.floor(Math.random() * prizes.length);
    return {
        winner: participants[winnerIndex],
        prize: prizes[prizeIndex]
    };
}

const result = drawLottery();
console.log(`中奖者: ${result.winner}, 奖项: ${result.prize}`);

权重抽奖实现

如果需要根据权重分配中奖概率，可以为每个参与者或奖项设置权重值：

js 实现抽奖

const weightedParticipants = [
    { name: 'Alice', weight: 10 },
    { name: 'Bob', weight: 20 },
    { name: 'Charlie', weight: 30 },
    { name: 'Diana', weight: 40 }
];

function weightedDraw(participants) {
    const totalWeight = participants.reduce((sum, p) => sum + p.weight, 0);
    const random = Math.random() * totalWeight;
    let currentWeight = 0;

    for (const participant of participants) {
        currentWeight += participant.weight;
        if (random <= currentWeight) {
            return participant.name;
        }
    }
}

const winner = weightedDraw(weightedParticipants);
console.log(`中奖者: ${winner}`);

避免重复中奖

在多次抽奖中可能需要避免同一人中奖多次：

function drawUniqueWinners(participants, count) {
    const winners = [];
    const availableParticipants = [...participants];

    for (let i = 0; i < count && availableParticipants.length > 0; i++) {
        const winnerIndex = Math.floor(Math.random() * availableParticipants.length);
        winners.push(availableParticipants[winnerIndex]);
        availableParticipants.splice(winnerIndex, 1);
    }

    return winners;
}

const uniqueWinners = drawUniqueWinners(participants, 2);
console.log('中奖者:', uniqueWinners);

动画效果增强用户体验

添加简单的抽奖动画效果：

function animateDraw(participants, duration) {
    let startTime = null;
    const displayElement = document.getElementById('winner-display');

    function animationFrame(timestamp) {
        if (!startTime) startTime = timestamp;
        const elapsed = timestamp - startTime;
        const progress = Math.min(elapsed / duration, 1);

        if (progress < 1) {
            const randomIndex = Math.floor(Math.random() * participants.length);
            displayElement.textContent = participants[randomIndex];
            requestAnimationFrame(animationFrame);
        } else {
            const winnerIndex = Math.floor(Math.random() * participants.length);
            displayElement.textContent = `最终中奖者: ${participants[winnerIndex]}`;
        }
    }

    requestAnimationFrame(animationFrame);
}

// 使用示例
animateDraw(participants, 3000); // 3秒动画