js实现头像抽奖
实现头像抽奖功能
基本思路
头像抽奖功能通常包括展示参与抽奖的用户头像，通过动画效果随机切换，最终停止在某个获奖头像上。核心逻辑涉及数组随机选取、动画控制及结果回调。
准备数据
假设已有参与抽奖的用户头像URL数组，格式如下：
const avatars = [
'https://example.com/avatar1.jpg',
'https://example.com/avatar2.jpg',
// 更多头像...
];实现抽奖动画
创建函数控制头像切换的动画效果，使用setInterval实现轮播，逐渐减速后停止：
function startLottery(avatars, duration, callback) {
const interval = 100; // 初始间隔毫秒
let timer = null;
let currentIndex = 0;
let elapsed = 0;
timer = setInterval(() => {
currentIndex = Math.floor(Math.random() * avatars.length);
updateAvatarDisplay(avatars[currentIndex]); // 更新DOM显示
elapsed += interval;
if (elapsed >= duration) {
clearInterval(timer);
callback(currentIndex); // 抽奖结束回调
} else {
// 动态调整间隔实现减速效果
const newInterval = interval + (elapsed / duration) * 200;
clearInterval(timer);
timer = setInterval(arguments.callee, newInterval);
}
}, interval);
}显示结果处理
定义结果显示函数和动画更新函数：
function updateAvatarDisplay(avatarUrl) {
document.getElementById('lottery-avatar').src = avatarUrl;
}
function showResult(winnerIndex) {
console.log('中奖者索引:', winnerIndex);
// 显示中奖特效或其他UI处理
}完整调用示例
// 点击抽奖按钮触发
document.getElementById('start-btn').addEventListener('click', () => {
startLottery(avatars, 3000, showResult); // 3秒抽奖过程
});增强功能建议
- 添加背景音乐和音效增强体验
- 实现多轮抽奖功能（避免重复中奖）
- 增加中奖记录展示
- 使用CSS动画优化视觉效果
- 移动端触摸事件支持
注意事项
- 确保头像加载完成后再开始抽奖
- 处理网络图片加载失败的情况
- 清除定时器防止内存泄漏
- 性能优化：大量头像时建议使用虚拟滚动
