Как создать светофор на PHP?

Как я могу настроить циклическое изменение цвета светофора в течение определенного времени и отображение текущего цвета при вводе определенной цифры, используя JavaScript?
  • 28 января 2024 г. 9:20
Ответы на вопрос 2
Для создания светофора на PHP и управления им с помощью JavaScript, вам нужно сделать следующее:

1. Определить логику работы светофора.
2. Создать HTML-разметку для отображения светофора.
3. Написать JavaScript-код для изменения цветов светофора.
4. Использовать PHP для обработки ввода цифры и отображения текущего цвета светофора.

Ниже приведен пример кода, который демонстрирует работу светофора:

**HTML и JavaScript (поместите следующий код в файл, например, `traffic_light.html`):**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Светофор</title>
<style>
  #trafficLight {
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 300px;
    background-color: black;
    padding: 10px;
  }
  .light {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    margin: 10px auto;
    background-color: grey;
    transition: background-color 0.3s;
  }
</style>
</head>
<body>

<div id="trafficLight">
  <div class="light" id="redLight"></div>
  <div class="light" id="yellowLight"></div>
  <div class="light" id="greenLight"></div>
</div>

<script>
  let lights = ['red', 'yellow', 'green'];
  let currentLight = 0;

  function changeLights() {
    // Сбросить все цвета
    document.getElementById('redLight').style.backgroundColor = 'grey';
    document.getElementById('yellowLight').style.backgroundColor = 'grey';
    document.getElementById('greenLight').style.backgroundColor = 'grey';

    // Установить текущий цвет
    let lightId = lights[currentLight] + 'Light';
    document.getElementById(lightId).style.backgroundColor = lights[currentLight];

    // Переход к следующему цвету
    currentLight = (currentLight + 1) % lights.length;
  }

  // Изменять цвета каждые 3 секунды
  setInterval(changeLights, 3000);

  // Этот код будет обрабатывать изменение цвета светофора при вводе определённой цифры
  document.addEventListener('keyup', function(event) {
    if (event.key >= '1' && event.key <= '3') {
      currentLight = parseInt(event.key) - 1;
      changeLights();
    }
  });
</script>

</body>
</html>
```
В данном примере светофор будет автоматически меняться каждые 3 секунды. Если пользователь введет цифру от 1 до 3, то светофор изменит цвет: `1` для красного, `2` для жёлтого и `3` для зелёного.

**PHP (используется для отображения текущего цвета, если нужно отправить данные на сервер):**

Создайте файл `getCurrentColor.php`, который будет обрабатывать запрос текущего цвета:
```php
<?php
// Эмуляция логики получения текущего цвета светофора
// В реальном приложении здесь будет логика получения данных из, например, базы данных или другого источника

// Предполагаем, что светофор меняет цвета в следующем порядке каждые 3 секунды: Красный -> Жёлтый -> Зелёный
$currentColor = 'unknown';
$currentTime = time() % 9; // Получаем текущее время и делим его по модулю на 9 (т.к. каждые 3 секунды цвет меняется)

if ($currentTime < 3) {
  $currentColor = 'red';
} elseif ($currentTime < 6) {
  $currentColor = 'yellow';
} elseif ($currentTime < 9) {
  $currentColor =
Никакой интервал тут не нужен, достаточно знать точку отсчёта и стартовое состояние (у вас про них ничего не сказано, но за стартовое состояние по условию можно засчитать зелёный) и использовать простейшую математику, чтобы вычислить текущий сигнал. 
Хотя, если под вводимыми минутами понимается не таймстамп, а количество, прошедшее со времени включения, то в задаче есть все вводные для её решения элементарным алгоритмом.
А сделать интерактивную смену на php вы всё равно не сможете*.

*ну, есть, конечно, костыль с meta-тегом refresh, но это уже не про php.
Похожие вопросы