简易抽奖应用程序

介绍

在这个项目中，你将学习如何使用 JavaScript 和 jQuery 创建一个简单的抽奖应用程序。该应用程序将通过旋转奖品列表并在旋转停止时显示中奖奖品来模拟抽奖。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何设置项目文件和目录
• 如何实现 rolling 函数来处理奖品旋转并显示中奖奖品
• 如何测试项目以确保其按预期工作

🏆 成果

完成这个项目后，你将能够：

• 使用 JavaScript 和 jQuery 创建交互式 Web 应用程序
• 使用 requestAnimationFrame 实现简单的动画循环
• 处理用户交互并相应地更新用户界面

设置项目结构

在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── css
│   └── style.css
├── index.html
└── js
    ├── index.js
    └── jquery.js

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新以查看页面。

实现滚动功能

在这一步中，你将使用 jQuery 或 JavaScript 在 index.js 中实现 rolling 函数。按照以下步骤完成此步骤：

1. 在 index.js 中找到 rolling 函数。
2. 完善 rolling 函数以满足以下要求：
   • 当你点击开始按钮时，以 li1 的 class 元素为起点，奖品上的黄色背景（类 .active）顺时针旋转。
   • 当旋转停止时，在页面 id 为 award 的元素中显示中奖提示。中奖提示必须包含奖品名称，该名称必须与标题中的名称完全相同。
   • 给出旋转间隔和旋转停止条件。

在与 rolling 函数同级的位置定义一个变量 num，并将其默认值设置为 -1。将 num 以及 rolling 函数中的具体代码设置如下：

//...

// 待办事项：请完成此函数
let num = -1; // 旋转后所在的元素索引

function rolling() {
  time++; // 旋转次数加 1
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 执行递归动画
  }, speed);
  num++; // 索引加 1
  if (num > 8) {
    // 如果索引大于 7，重置为 0，因为有 8 个奖品
    num = 1;
  }
  // 给中奖的 li 添加 active 类
  $(".li" + num)
    .addClass("active")
    .siblings()
    .removeClass("active");
  // 如果旋转次数大于总旋转次数，则停止旋转并清除定时器
  if (time > times) {
    clearInterval(rollTime);
    console.log(num, "索引");
    console.log($(".li" + num).text());
    // 显示中奖信息
    $("#award").text(`恭喜你中奖获得 ${$(".li" + num).text()}!!!`);
    time = 0;
    num = -1;
    return;
  }
}

测试项目

在这一步中，你将测试项目以确保其按预期工作。按照以下步骤完成此步骤：

1. 将对 js/index.js 文件所做的更改保存。
2. 在浏览器中刷新页面。
3. 点击“开始”按钮以开始抽奖。
4. 观察奖品的旋转以及旋转停止时中奖提示的显示。
5. 重复步骤 3 - 4 几次，以确保项目正常运行。

最终结果如下：

恭喜！你已完成抽奖项目。如果你有任何问题或遇到任何问题，请随时提问。

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。