js抽奖实现
JavaScript 抽奖实现方法
核心思路
通过随机数生成器确定中奖结果，结合DOM操作实现动态效果。以下是两种常见实现方式：
方法一：基础随机抽奖
定义奖品数组，通过Math.random()生成随机索引：
const prizes = ['一等奖', '二等奖', '三等奖', '谢谢参与'];
function draw() {
const index = Math.floor(Math.random() * prizes.length);
return prizes[index];
}方法二：带概率控制的抽奖
为每个奖品设置独立概率，使用区间判断：
const prizePool = [
{ name: 'iPhone', prob: 0.01 },
{ name: '耳机', prob: 0.1 },
{ name: '优惠券', prob: 0.3 },
{ name: '谢谢参与', prob: 0.59 }
];
function weightedDraw() {
const rand = Math.random();
let cumulativeProb = 0;
for (const prize of prizePool) {
cumulativeProb += prize.prob;
if (rand < cumulativeProb) return prize.name;
}
}动态效果增强
添加转盘动画增强用户体验：
const startBtn = document.getElementById('start');
const resultDiv = document.getElementById('result');
startBtn.addEventListener('click', () => {
let counter = 0;
const interval = setInterval(() => {
resultDiv.textContent = prizes[Math.floor(Math.random() * prizes.length)];
if (counter++ > 20) {
clearInterval(interval);
resultDiv.textContent = weightedDraw();
}
}, 100);
});注意事项
- 概率总和应严格等于1
- 移动端需添加触摸事件支持
- 中奖结果建议通过后端验证防止篡改
扩展功能
可增加以下特性：
- 奖品库存实时更新
- 用户抽奖次数限制
- 中奖历史记录展示
- 响应式布局适配多设备
