当前位置：首页 > JavaScript

js实现照片抽奖

2026-03-01 16:14:25JavaScript

实现照片抽奖功能

照片抽奖功能可以通过随机选择数组中的元素来实现。以下是一个简单的实现方案：

HTML结构

创建一个包含照片展示区域和抽奖按钮的HTML结构：

<div id="photo-container"></div>
<button id="draw-button">开始抽奖</button>

JavaScript实现

// 照片数组
const photos = [
  {name: '张三', url: 'photo1.jpg'},
  {name: '李四', url: 'photo2.jpg'},
  {name: '王五', url: 'photo3.jpg'},
  // 更多照片...
];

// 获取DOM元素
const photoContainer = document.getElementById('photo-container');
const drawButton = document.getElementById('draw-button');

// 抽奖逻辑
function drawLottery() {
  // 清空容器
  photoContainer.innerHTML = '';

  // 随机选择照片
  const randomIndex = Math.floor(Math.random() * photos.length);
  const winner = photos[randomIndex];

  // 显示中奖照片
  const img = document.createElement('img');
  img.src = winner.url;
  img.alt = winner.name;
  photoContainer.appendChild(img);

  // 显示中奖者姓名
  const name = document.createElement('p');
  name.textContent = `中奖者: ${winner.name}`;
  photoContainer.appendChild(name);
}

// 绑定按钮事件
drawButton.addEventListener('click', drawLottery);

增强功能

如果需要更复杂的抽奖效果，可以添加以下功能：

// 添加抽奖动画效果
let animationInterval;
drawButton.addEventListener('click', function() {
  // 如果已经在抽奖，停止当前抽奖
  if(animationInterval) {
    clearInterval(animationInterval);
    animationInterval = null;
    return;
  }

  // 开始快速切换显示照片
  animationInterval = setInterval(() => {
    const randomIndex = Math.floor(Math.random() * photos.length);
    photoContainer.innerHTML = '';
    const img = document.createElement('img');
    img.src = photos[randomIndex].url;
    photoContainer.appendChild(img);
  }, 100);

  // 3秒后停止并显示最终结果
  setTimeout(() => {
    clearInterval(animationInterval);
    animationInterval = null;
    drawLottery();
  }, 3000);
});

注意事项

确保照片路径正确
考虑添加音效增强体验
可以添加排除已中奖者的逻辑
对于大量照片，考虑使用懒加载技术

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>照片抽奖</title>
  <style>
    #photo-container {
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      margin-bottom: 20px;
    }
    #photo-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div id="photo-container"></div>
  <button id="draw-button">开始抽奖</button>

  <script>
    const photos = [
      {name: '张三', url: 'https://example.com/photo1.jpg'},
      {name: '李四', url: 'https://example.com/photo2.jpg'},
      {name: '王五', url: 'https://example.com/photo3.jpg'},
    ];

    const photoContainer = document.getElementById('photo-container');
    const drawButton = document.getElementById('draw-button');

    function drawLottery() {
      photoContainer.innerHTML = '';
      const randomIndex = Math.floor(Math.random() * photos.length);
      const winner = photos[randomIndex];

      const img = document.createElement('img');
      img.src = winner.url;
      img.alt = winner.name;
      photoContainer.appendChild(img);

      const name = document.createElement('p');
      name.textContent = `中奖者: ${winner.name}`;
      photoContainer.appendChild(name);
    }

    drawButton.addEventListener('click', drawLottery);
  </script>
</body>
</html>

js实现照片抽奖