Создание системы светофора с использованием JavaScript

Введение

В этом проекте вы научитесь создавать систему светофора, которая меняет цвет света с красного на зеленый через определенный интервал времени. Этот проект поможет вам понять основы JavaScript и как манипулировать DOM для отображения различных элементов на основе событий, связанных с временем.

👀 Предварительный просмотр

🎯 Задачи

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

• настраивать базовую структуру проекта на HTML и JavaScript;
• реализовывать функцию для изменения отображения светофора на красный через 3 секунды;
• реализовывать функцию для изменения отображения светофора на зеленый через 6 секунд;
• координировать выполнение функций красного и зеленого сигналов с использованием async/await;
• тестировать систему светофора и убедиться, что она работает как ожидается.

🏆 Достижения

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

• манипулировать DOM с использованием JavaScript для изменения отображения HTML-элементов;
• использовать setTimeout() для планирования событий, связанных с временем;
• управлять асинхронными операциями с использованием async/await;
• тестировать и отлаживать свой код JavaScript.

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

В этом шаге вы настроите структуру проекта и подготовите необходимые файлы и папки.

1. Откройте редактор. В директории /home/labex/project вы должны увидеть index.html, trafficlights.js и несколько изображений.
2. Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.
3. Откройте "Web 8080" в верхней части ВМ и обновите его вручную, и вы увидите страницу.

Реализовать функцию красного света

В этом шаге вы реализуете функцию для изменения цвета света на красный.

1. В файле trafficlights.js найдите функцию red().
2. Создайте переменную выше функции red и задайте ей начальное значение:

let trafficlightsTimer = 3000;
// function red() {...}

3. Функция red() должна изменить отображение исходного света на none и отображение красного света на inline-block через 3 секунды.

function red() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      defaultlight.style.display = "none";
      redlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

Реализовать функцию зеленого света

В этом шаге вы реализуете функцию для изменения цвета света на зеленый.

1. В файле trafficlights.js найдите функцию green().
2. Функция green() должна изменить отображение красного света на none и отображение зеленого света на inline-block через 3 секунды (6 секунд после загрузки страницы).

function green() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      redlight.style.display = "none";
      greenlight.style.display = "inline-block";
      resolve();
    }, trafficlightsTimer);
  });
}

Вызывать функции системы светофора

В этом шаге вы вызовете функцию trafficlights(), чтобы запустить последовательность работы светофора.

1. В файле trafficlights.js найдите функцию trafficlights().
2. Функция trafficlights() должна последовательно вызывать функции red() и green() с использованием синтаксиса async/await.

async function trafficlights() {
  await red();
  await green();
}

trafficlights();
module.exports = { trafficlights };

Тестировать систему светофора

1. Сохраните изменения в файле trafficlights.js.
2. Обновите страницу в вашем браузере. Вы должны увидеть, как светофор меняется с исходного цвета на красный, а затем через 6 секунд на зеленый. Готовый результат выглядит так:

Поздравляем! Вы завершили проект "Цветной меняющийся светофор". Если у вас есть вопросы или нужна дополнительная помощь, не стесняйтесь задавать их.

Резюме

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