不务正业搞抽奖，码农的年味程序怎么写？

前端

2023-12-09 10:55:28

打造年味代码：用抽奖系统点亮年会气氛

年会临近，作为程序员的我们，该如何用代码为年会增添一抹年味呢？抽奖系统就是一个不错的选择。让我们一步步打造一个简单实用的抽奖系统，为年会注入更多欢乐！

抽奖系统的设计

我们的抽奖系统由几个核心部分组成：

抽奖页面： 用户参与抽奖的界面，包含奖品列表和抽奖按钮。
抽奖逻辑： 系统核心，负责随机抽取中奖用户并生成抽奖结果。
抽奖结果页面： 显示抽奖结果，包括中奖用户列表和奖品信息。

实现抽奖系统

1. 准备工作

首先，创建一个 HTML 页面作为抽奖页面，包含奖品列表和抽奖按钮。

<html>
  <body>
    <h1>年会抽奖</h1>
    <ul id="prizes">
      <li>一等奖：MacBook Pro</li>
      <li>二等奖：iPhone 14</li>
      <li>三等奖：Apple Watch</li>
      <!-- ... -->
    </ul>
    <button id="draw-button">抽奖</button>
  </body>
</html>

2. 编写抽奖逻辑

使用 JavaScript 实现抽奖逻辑，从奖品列表中随机抽取中奖用户。

// 奖品列表
const prizes = document.querySelectorAll("#prizes li");

// 抽奖按钮
const drawButton = document.getElementById("draw-button");

// 抽奖逻辑
drawButton.addEventListener("click", () => {
  // 随机生成中奖用户索引
  const winnerIndex = Math.floor(Math.random() * prizes.length);

  // 获取中奖用户
  const winner = prizes[winnerIndex];

  // 获取奖品信息
  const prize = winner.textContent;

  // 显示抽奖结果
  alert(`中奖者：${winner.textContent}\n奖品：${prize}`);
});

3. 设计抽奖结果页面

创建另一个 HTML 页面显示抽奖结果，包含中奖用户列表和奖品信息。

<html>
  <body>
    <h1>抽奖结果</h1>
    <ul id="winners">
      <li>中奖者 1：MacBook Pro</li>
      <li>中奖者 2：iPhone 14</li>
      <li>中奖者 3：Apple Watch</li>
      <!-- ... -->
    </ul>
  </body>
</html>