Простое приложение для розыгрыша призов

JavaScriptJavaScriptIntermediate
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом проекте вы научитесь создавать простое приложение для розыгрыша призов с использованием JavaScript и jQuery. Приложение будет симулировать розыгрыш призов, вращая список призов и отображая выигрышный приз, когда вращение останавливается.

👀 Предпросмотр

Предпросмотр анимации розыгрыша призов

🎯 Задачи

В этом проекте вы научитесь:

  • настраивать файлы и директории проекта;
  • реализовывать функцию rolling для обработки вращения призов и отображения выигрышного приза;
  • тестировать проект, чтобы убедиться, что он работает как ожидается.

🏆 Достижения

После завершения этого проекта вы сможете:

  • использовать JavaScript и jQuery для создания интерактивных веб-приложений;
  • реализовывать простой цикл анимации с использованием 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

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и вручную обновите ее, чтобы увидеть страницу.

незавершенная структура проекта

Реализация функции вращения

В этом шаге вы реализуете функцию rolling в index.js с использованием jQuery или JavaScript. Следуйте шагам ниже, чтобы выполнить этот шаг:

  1. Найдите функцию rolling в index.js.

  2. Усовершенствуйте функцию rolling, чтобы удовлетворить следующим требованиям:

    • При нажатии на кнопку "Старт" элемент class элемента li1 является начальной точкой, и желтый фон (класс .active) вращается по часовой стрелке на призах.
    • Когда вращение останавливается, подсказка о призе отображается в элементе с id как элемент award страницы. Подсказка о призе должна содержать название приза, которое должно быть точным совпадением с именем в заголовке.
    • Задаются интервал вращения и условия остановки вращения.

Определите переменную num на том же уровне, что и функция rolling, и задайте ей значение по умолчанию -1. Задайте num и конкретный код внутри функции rolling следующим образом:

//...

// TODO: Пожалуйста, завершите эту функцию
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;
  }
  // Добавить класс.active к выигрышному li
  $(".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, чтобы улучшить свои навыки.