当前位置：首页 > JavaScript

js实现头像抽奖

2026-02-02 16:59:22JavaScript

实现头像抽奖的步骤

准备工作

准备一个包含所有参与者头像的数组，可以是图片URL或base64编码。
创建一个HTML结构，包含显示头像的区域和开始抽奖的按钮。

HTML结构示例

<div id="avatar-container">
  <img id="avatar" src="default-avatar.png" alt="抽奖头像">
</div>
<button id="start-lottery">开始抽奖</button>

CSS样式

#avatar-container {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border-radius: 50%;
  overflow: hidden;
}

#avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#start-lottery {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #ff4757;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript实现

// 头像数组
const avatars = [
  'avatar1.png',
  'avatar2.png',
  'avatar3.png',
  // 更多头像...
];

// 获取DOM元素
const avatarElement = document.getElementById('avatar');
const startButton = document.getElementById('start-lottery');

// 抽奖状态
let isLotteryRunning = false;
let lotteryInterval;

// 随机切换头像函数
function switchAvatar() {
  const randomIndex = Math.floor(Math.random() * avatars.length);
  avatarElement.src = avatars[randomIndex];
}

// 开始/停止抽奖
startButton.addEventListener('click', function() {
  if (!isLotteryRunning) {
    // 开始抽奖
    isLotteryRunning = true;
    startButton.textContent = '停止抽奖';
    lotteryInterval = setInterval(switchAvatar, 100);
  } else {
    // 停止抽奖
    isLotteryRunning = false;
    startButton.textContent = '开始抽奖';
    clearInterval(lotteryInterval);

    // 最终结果可以添加一些效果
    avatarElement.style.transform = 'scale(1.1)';
    setTimeout(() => {
      avatarElement.style.transform = 'scale(1)';
    }, 300);
  }
});

高级功能扩展

添加音效 可以在抽奖过程中添加背景音乐或音效增强体验。

// 添加音效
const audio = new Audio('lottery-sound.mp3');

startButton.addEventListener('click', function() {
  if (!isLotteryRunning) {
    audio.play();
    // ...其他代码
  } else {
    audio.pause();
    audio.currentTime = 0;
    // ...其他代码
  }
});

动画效果 使用CSS动画或JavaScript动画库（如anime.js）为抽奖过程添加更丰富的视觉效果。

结果保存 可以将抽奖结果保存到本地存储或发送到服务器。

let winnerAvatar = '';

startButton.addEventListener('click', function() {
  if (!isLotteryRunning) {
    // ...开始抽奖代码
  } else {
    winnerAvatar = avatarElement.src;
    localStorage.setItem('lastWinner', winnerAvatar);
    // ...其他代码
  }
});