Реализовать светофор

@Vladimir1993 · Регистрация: 08.11.2014

Студворк — интернет-сервис помощи студентам

Доброго времени суток. С javascript не работал, учу Java. Появилась задача написать простой светофор с тремя кнопками(для переключения цветов в ручном режиме) Внизу код, такой вопрос. Когда в функции описываю изменение стиля одного дива- все работает, если я в функции изменяю стили всем дивам - изменяеться только первый...тобиж не работает. Так же в теге скрипт разные реализации методов, пытался решить проблему Что не так? Подскажите что почитать, чтобы разобраться..

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <title>Светофор</title>
    <link rel="stylesheet" type="text/css" href="Stylesheet.css">
    <script type="text/javascript">
 
 
 
    function changeDiv (id){
        if (id  == document.getElementById('closedred')){
            document.getElementById('closered').style.background = 'red';
            document.getElementById('closedyellow').style.backgroundColor = 'closedyellow';
            document.getElementById('closedgreen').style.backgroundColor = 'closedgreen';
        }
        if (id == document.getElementById('closedyellow')){
            document.getElementById('closedred').style.backgroundColor = 'closedred';
            document.getElementById('closedyellow').style.backgroundColor = 'yellow';
            document.getElementById('closedgreen').style.backgroundColor = 'closedgreen';
        }
        if (id == document.getElementById('closedgreen')){
            document.getElementById('closered').style.backgroundColor = 'closedred';
            document.getElementById('closedyellow').style.backgroundColor = 'closedyellow';
            document.getElementById('closedgreen').style.backgroundColor = 'green';
        }
    
    </script>
</head>
<body>
 
<div align="center" id="closedred">
 
</div>
<div align="center" id="closedyellow">
 
</div>
<div align="center" id="closedgreen">
 
</div>
<input type=button value="Запуск" onclick="ready()">
<table border=1 align=center><tr><td><div class=text3><form>
    <span></span><input type=button value="Красный" onClick="changeDiv('closedred')">
    <input type=button value="Желтый" onClick="document.getElementById('closedyellow').style.backgroundColor = 'yellow'">
    <input type=button value="Зеленый" onClick="document.getElementById('closedgreen').style.backgroundColor = 'green'">
</form></div></td></table>
 
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#red {
     align-content: center;
     width: 100px;
     height: 100px;
     background: #FF0000;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
     border-radius: 50px;
     border: solid;
 }
#green {
    align-content: center;
    width: 100px;
    height: 100px;
    background:  #00FF00;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: solid;
}
#yellow {
    align-content: center;
    width: 100px;
    height: 100px;
    background:  #FFFF00;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: solid;
}
#closedred {
    align-content: center;
    width: 100px;
    height: 100px;
    background: #FFE4E1;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: solid;
}
#closedgreen {
    align-content: center;
    width: 100px;
    height: 100px;
    background:  #F0FFF0;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: solid;
}
#closedyellow {
    align-content: center;
    width: 100px;
    height: 100px;
    background:  #FFFFE0;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: solid;
}

@kalabuni · 08.11.2014, 22:39

а что это за цвет такой? -- document.getElementById('closedyellow'). style.backgroundColor = 'closedyellow'; -- вы бы ещё написали document.getElementById('closedyellow'). style.backgroundColor = 'ХренЗнаетКакойЦвет';

@Vladimir1993 · 08.11.2014, 23:28 **[ТС]**

я написал, что новичок в JS. Я присваивал стиль а не цвет, разве так нельзя?

@kalabuni · 08.11.2014, 23:43

style.backgroundColor - это свойство стиля под названием цвет фона, браузер здесь ожидает название цвета или его код в HEX-формате или в RGB-формате

@Vladimir1993 · 08.11.2014, 23:50 **[ТС]**

В принципе понятно,хотя с другой стороны в строках 44 и 45(их я оставил для примера) там див менят стиль..то есть когда происходит одно изменение, то вроде как все норм, когда много - не работает..Или я что-то не улавливаю?

@kalabuni · 08.11.2014, 23:54

в строках 44 и 45 у вас присваиваются существующие названия цветов - yellow и green, что является синтаксически правильным - поэтому браузер это нормально обрабатывает
а вот цветов closedyellow, closedred и closedgreen браузер не знает

@Vladimir1993 · 08.11.2014, 23:57 **[ТС]**

Спасибо, ваше замечания верно, код стал работать, но если Вам не трудно ответте на предыдущий вопрос, чтобы разобраться в ситуации.

Добавлено через 1 минуту
Блин точно) Коротко и ясно. Спасибо. А не подскажите, если я хочу автоматизировать его работу, близкой к реальной жизни, с чего начать? это я так понимаю работа с таймерами будет?

@kalabuni · 08.11.2014, 23:57

Сообщение от Vladimir1993

Спасибо, ваше замечания верно, код стал работать, но если Вам не трудно ответте на предыдущий вопрос

какой такой "предыдущий вопрос"?

@Vladimir1993 · 09.11.2014, 00:04 **[ТС]**

Вы уже на него ответили. А как лучше подойти к его автоматизации? Что почитать? Таймеры надо использовать?

@GuardCat · 09.11.2014, 00:21

Vladimir1993, у вас довольно сложно все написано. Посмотрите на такой вариант (покликайте по цветам).

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<head>
<style type="text/css">
  #back > div {
    width:         70px;
    height:        70px;
    border-radius: 70px;
    margin:        2px;
  }
  
  #back {
    background-color: gray;
    width:            74px;
    padding:          2px;
  }
  
  #red.open      {background-color: red;}
  #red.closed    {background-color: #300000;}
  
  #yellow.open   {background-color: #FFFF00; border-color: #404000;}
  #yellow.closed {background-color: #303000;}
 
  #green.open    {background-color: green; border-color: #004000;}
  #green.closed  {background-color: #003000;}
 
</style>
</head>
<body>
  <div id="back">
    <div id="red"    onclick="on(this)" class="closed"></div>
    <div id="yellow" onclick="on(this)" class="open"  ></div>
    <div id="green"  onclick="on(this)" class="closed"></div>
  </div>
 
  
  <script>
    
    function on(elem) {
      var x, lights = document.querySelectorAll("#back > div");
      for (x in lights) {
        lights[x].className = "closed"
      }
      elem.className = "open"
    }
  </script>
  
</body>
</html>

@Vladimir1993 · 09.11.2014, 00:33 **[ТС]**

Спасибо. Интересная реализация. Так как я больше пишу на Java, мне больше ближе моя реализация. Буду разбираться.

@GuardCat · 09.11.2014, 00:41

Vladimir1993, для автоматизации почитайте, например, здесь про таймеры.

@kalabuni · 09.11.2014, 14:31

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<head>
<style>
#TL {background-color: gray; width: 74px; padding: 2px}
#TL div {background-color: black; width: 70px; height: 70px; border-radius: 70px; margin: 2px}
</style>
 <script>
onload = function ()
{
var CLR = ['red', 'yellow', 'green'],
    TMR = [    5,        3,       6], // âðåìÿ ðàáîòû ñîîòâåòñòâóþùèõ öâåòîâ ñâåòîôîðà, â ñåê
    IND = 2; AAA ();
   function AAA () 
   {
   var dv = document.getElementById ('TL').getElementsByTagName ('div')
   dv [IND].style.backgroundColor = '';
   if (++IND > 2) IND = 0;
   dv [IND].style.backgroundColor = CLR [IND];
   setTimeout (AAA, TMR [IND] * 1000);
   }
}
  </script>
</head>
<body>
<div id="TL">
   <div></div>
   <div></div>
   <div></div>
</div>
</body>
</html>

и более сложный вариант: красный -- красный с жёлтым -- зелёный -- мигающий зелёный -- жёлтый -- и снова красный

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<head>
<style>
#TL {background-color: gray; width: 74px; padding: 2px}
#TL div {background-color: black; width: 70px; height: 70px; border-radius: 70px; margin: 2px}
</style>
 <script>
onload = function ()
{
var CLR = ['100', '110', '001', '000', '001', '000', '001', '000', '010'],
    TMR = [   12,     5,    12,     1,     1,     1,     1,     1,     3]; // âðåìÿ ðàáîòû ñîîòâåòñòâóþùèõ
                                                                           // öâåòîâ ñâåòîôîðà, â ïîë-ñåêóíäàõ
AAA ();
   function AAA () 
   {
   var dv = document.getElementById ('TL').getElementsByTagName ('div');
   var cc = CLR.shift (); CLR.push (cc);
   var tt = TMR.shift (); TMR.push (tt);
   dv [0].style.backgroundColor = (cc.charAt (0) == 1) ? 'red' : '';
   dv [1].style.backgroundColor = (cc.charAt (1) == 1) ? 'yellow' : '';
   dv [2].style.backgroundColor = (cc.charAt (2) == 1) ? 'green' : '';
   setTimeout (AAA, tt * 500);
   }
}
  </script>
</head>
<body>
<div id="TL">
   <div></div>
   <div></div>
   <div></div>
</div>
</body>
</html>

@3dartmax · 15.11.2017, 05:39

а объясните пож. как работает вот эта функция. если можно подробно.

JavaScript
1
2
3
4
5
6
function on(elem) {
      for (x in lights) {
        lights[x].className = "closed"
      }
      elem.className = "open"
    }

Добавлено через 45 минут
и еще не нашел инфы по вот этой строке:

HTML5
1
onclick="on(this)"

очень ннннада!

@Balanaar · 15.11.2017, 09:31

JavaScript
1
2
3
4
5
6
function on(elem) { // Функция устанавливает класс "open" для элемента elem, переданного в функцию. Для всех остальных элементов объекта lights устанавливается класс "closed"
      for (x in lights) { // Для каждого свойства объекта lights сделать...
        lights[x].className = "closed" // Назначить класс "closed" текущему свойству объекта lights
      }
      elem.className = "open" // Назначить класс "open" элементу elem, переданному в качестве аргумента функции
    }

onclick="on(this)" вешает событие "при клике" на элемент. При нажатии на этот элемент будет вызвана функция on(), а в качестве аргумента будет передан элемент, по которому нажали.

@3dartmax · 15.11.2017, 19:53

Скажите а элементы "elem" и "this" должны называться именно так или я могу их назвать както по своему? например "bulb" и "colorlight"?

@Balanaar · 16.11.2017, 09:37

Аргумент elem вы можете обозвать как хотите. this не трогайте. Это ключевое слово, обозначающее текущий контекст.

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	08.11.2014, 22:39
	а что это за цвет такой? -- document.getElementById('closedyellow'). style.backgroundColor = 'closedyellow'; -- вы бы ещё написали document.getElementById('closedyellow'). style.backgroundColor = 'ХренЗнаетКакойЦвет'; 0

@Vladimir1993 0 / 0 / 1 Регистрация: 08.11.2014 Сообщений: 21
	08.11.2014, 23:28 [ТС]
	я написал, что новичок в JS. Я присваивал стиль а не цвет, разве так нельзя? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	08.11.2014, 23:43
	style.backgroundColor - это свойство стиля под названием цвет фона, браузер здесь ожидает название цвета или его код в HEX-формате или в RGB-формате 0

@Vladimir1993 0 / 0 / 1 Регистрация: 08.11.2014 Сообщений: 21
	08.11.2014, 23:50 [ТС]
	В принципе понятно,хотя с другой стороны в строках 44 и 45(их я оставил для примера) там див менят стиль..то есть когда происходит одно изменение, то вроде как все норм, когда много - не работает..Или я что-то не улавливаю? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	08.11.2014, 23:54
	в строках 44 и 45 у вас присваиваются существующие названия цветов - yellow и green, что является синтаксически правильным - поэтому браузер это нормально обрабатывает а вот цветов closedyellow, closedred и closedgreen браузер не знает 1

@Vladimir1993 0 / 0 / 1 Регистрация: 08.11.2014 Сообщений: 21
	08.11.2014, 23:57 [ТС]
	Спасибо, ваше замечания верно, код стал работать, но если Вам не трудно ответте на предыдущий вопрос, чтобы разобраться в ситуации. Добавлено через 1 минуту Блин точно) Коротко и ясно. Спасибо. А не подскажите, если я хочу автоматизировать его работу, близкой к реальной жизни, с чего начать? это я так понимаю работа с таймерами будет? 0

@Vladimir1993 0 / 0 / 1 Регистрация: 08.11.2014 Сообщений: 21
	09.11.2014, 00:04 [ТС]
	Вы уже на него ответили. А как лучше подойти к его автоматизации? Что почитать? Таймеры надо использовать? 0

@Vladimir1993 0 / 0 / 1 Регистрация: 08.11.2014 Сообщений: 21
	09.11.2014, 00:33 [ТС]
	Спасибо. Интересная реализация. Так как я больше пишу на Java, мне больше ближе моя реализация. Буду разбираться. 0

@GuardCat Просто любитель 626 / 464 / 120 Регистрация: 20.01.2011 Сообщений: 865 Записей в блоге: 2
	09.11.2014, 00:41
	Vladimir1993, для автоматизации почитайте, например, здесь про таймеры. 0

@3dartmax 0 / 0 / 0 Регистрация: 15.11.2017 Сообщений: 3
	15.11.2017, 19:53
	Скажите а элементы "elem" и "this" должны называться именно так или я могу их назвать както по своему? например "bulb" и "colorlight"? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	16.11.2017, 09:37
	Аргумент elem вы можете обозвать как хотите. this не трогайте. Это ключевое слово, обозначающее текущий контекст. 1