js实现头像抽奖
实现头像抽奖功能
使用JavaScript实现头像抽奖功能，可以通过随机选择数组中的元素来实现。以下是一个完整的实现方案：
// 准备头像数据数组
const avatars = [
{ id: 1, name: '用户1', avatar: 'avatar1.jpg' },
{ id: 2, name: '用户2', avatar: 'avatar2.jpg' },
{ id: 3, name: '用户3', avatar: 'avatar3.jpg' },
{ id: 4, name: '用户4', avatar: 'avatar4.jpg' },
{ id: 5, name: '用户5', avatar: 'avatar5.jpg' }
];
// 获取DOM元素
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const resultDiv = document.getElementById('result');
const avatarImg = document.getElementById('avatarImg');
const userName = document.getElementById('userName');
let timer = null;
let currentIndex = 0;
// 开始抽奖
startBtn.addEventListener('click', () => {
clearInterval(timer);
timer = setInterval(() => {
currentIndex = Math.floor(Math.random() * avatars.length);
displayAvatar(currentIndex);
}, 100);
});
// 停止抽奖
stopBtn.addEventListener('click', () => {
clearInterval(timer);
announceWinner(currentIndex);
});
// 显示当前头像
function displayAvatar(index) {
avatarImg.src = avatars[index].avatar;
userName.textContent = avatars[index].name;
}
// 宣布获奖者
function announceWinner(index) {
resultDiv.textContent = `恭喜 ${avatars[index].name} 获奖!`;
displayAvatar(index);
}HTML结构示例
<div class="lottery-container">
<img id="avatarImg" src="default.jpg" alt="抽奖头像">
<p id="userName">等待抽奖...</p>
<div id="result"></div>
<button id="startBtn">开始抽奖</button>
<button id="stopBtn">停止抽奖</button>
</div>CSS样式建议
.lottery-container {
text-align: center;
margin: 20px auto;
max-width: 400px;
}
#avatarImg {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
}
button {
padding: 8px 16px;
margin: 0 5px;
cursor: pointer;
}功能扩展建议
增加音效增强用户体验
const startSound = new Audio('start.mp3');
const stopSound = new Audio('stop.mp3');
startBtn.addEventListener('click', () => {
startSound.play();
// 原有代码
});
stopBtn.addEventListener('click', () => {
stopSound.play();
// 原有代码
});添加抽奖动画效果
function displayAvatar(index) {
avatarImg.classList.add('blink');
setTimeout(() => {
avatarImg.src = avatars[index].avatar;
userName.textContent = avatars[index].name;
avatarImg.classList.remove('blink');
}, 200);
}对应的CSS动画
@keyframes blink {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}
.blink {
animation: blink 0.2s;
}注意事项
确保头像图片路径正确 抽奖按钮应防止重复点击 移动端需要调整样式适应不同屏幕 考虑添加参与抽奖的人数限制功能 可以增加奖品信息显示功能
