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

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

• использовать JavaScript и jQuery для создания интерактивных веб-приложений;
• реализовывать простой цикл анимации с использованием requestAnimationFrame;
• обрабатывать взаимодействия пользователя и соответствующим образом обновлять интерфейс пользователя.

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура директорий следующая:

├── 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, чтобы улучшить свои навыки.