简易抽奖应用程序

JavaScriptJavaScriptIntermediate
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

抽奖动画预览

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("`DOM Traversal`") subgraph Lab Skills javascript/functions -.-> lab-445672{{"`简易抽奖应用程序`"}} javascript/dom_select -.-> lab-445672{{"`简易抽奖应用程序`"}} javascript/dom_manip -.-> lab-445672{{"`简易抽奖应用程序`"}} javascript/event_handle -.-> lab-445672{{"`简易抽奖应用程序`"}} javascript/dom_traverse -.-> lab-445672{{"`简易抽奖应用程序`"}} end

设置项目结构

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

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

├── 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 函数以满足以下要求:

    • 当你点击开始按钮时,以 li1class 元素为起点,奖品上的黄色背景(类 .active)顺时针旋转。
    • 当旋转停止时,在页面 idaward 的元素中显示中奖提示。中奖提示必须包含奖品名称,该名称必须与标题中的名称完全相同
    • 给出旋转间隔和旋转停止条件。

在与 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 中练习更多实验以提升你的技能。

您可能感兴趣的其他 JavaScript 教程