Светофор отображающий цвет в реальном времени

@tarik_azizov · Регистрация: 30.10.2016

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

Нужно сделать светофор который бы отображал цвет в реальном времени, допустим полный цикл светофора будет 1 минута. Не понимаю, как сделать по-умному, чтобы не делать кучу условных операторов. Буду благодарен за помощь. Вот код:

PHP/HTML
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dz_10</title>
    <style>
 
    html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
 
.light {
width: 170px;
height: 100px;
border: 3px solid #fff;
border-radius: 50%;
background: #B8B8B8;
}
 
.block{
 
  background: #000;
}
 
 
.block > div {
    width:         100px;
    height:        100px;
    border-radius: 100px;
    margin:        2px;
  }
  
  .block {
    background-color: black;
    width:            110px;
    padding:          2px;
  }
    
    .buttons{
        padding-right: 70px;
    }
    button{
        padding: 25px;
    }
  
 
    </style>
</head>
<body>
    
 
 
 
<script>
    var block = document.createElement("div");
    block.className = "block";
 
    var buttons = document.createElement("div");
    buttons.className = "buttons";
    var but1 = document.createElement("button");
    but1.className = "start";
    but1.innerHTML = "Start";
    var but2 = document.createElement("button");
    but2.className = "stop";
    but2.innerHTML = "Stop";
 
    var newFirst = document.createElement("div");
    newFirst.className = "light";
    newFirst.id = "green";
 
    var newSecond = document.createElement("div");
    newSecond.className = "light";
    newSecond.id = "yellow";
 
    var newThird = document.createElement("div");
    newThird.className = "light";
    newThird.id = "red";
 
    document.body.appendChild(buttons);
    buttons.appendChild(but1);
    buttons.appendChild(but2);
    document.body.appendChild(block);
    block.appendChild(newFirst);
    block.appendChild(newSecond);
    block.appendChild(newThird);
    
    // var colors = ["green" , "black" , "green" , "black" , "green" , "black", "green", "yellow" , "red" , "yellow"];
    // var times = [0,26,27,28,29,30,31,32,33,59];
 
 
 
 
    but1.addEventListener("click", function(){
        var now = new Date();
        var seconds = now.getSeconds();
    });
 
 
 
    var svetofor =  document.getElementsByClassName("light");
    but2.addEventListener("click", function(){
        var svetofor =  document.getElementsByClassName("light");
        for(var i = 0; i<svetofor.length; i++){
        svetofor[i].style.background = "#B8B8B8";
        }
    });
 
 
 
 
 
 
 
</script>
</body>
</html>

@diadiavova · 10.09.2018, 09:43

tarik_azizov, из описания не очень понятно, как должен работать светофор, но, учитывая, что некоторое представление о работе этого устройства у меня есть, кое-что я набросал. Думаю, под свои критерии допилишь уже сам

JavaScript
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>dz_10</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
 
        [data-color="red"] #red {
            background-color: red;
        }
 
        [data-color="yellow"] #yellow {
            background-color: yellow;
        }
 
        [data-color="green"] #green {
            background-color: lime;
        }
 
        .light {
            width: 170px;
            height: 100px;
            border: 3px solid #fff;
            border-radius: 50%;
            background: #B8B8B8;
        }
 
        .block {
 
            background: #000;
        }
 
 
        .block>div {
            width: 100px;
            height: 100px;
            border-radius: 100px;
            margin: 2px;
        }
 
        .block {
            background-color: black;
            width: 110px;
            padding: 2px;
        }
 
        .buttons {
            padding-right: 70px;
        }
 
        button {
            padding: 25px;
        }
    </style>
</head>
 
<body>
    <div class="buttons">
        <button class="start" onclick="start();">Start</button>
        <button class="stop" onclick="stop();">Stop</button>
    </div>
 
    <div class="block">
        <div class="light" id="red"></div>
        <div class="light" id="yellow"></div>
        <div class="light" id="green"></div>
    </div>
 
    <script>
        var timer, colors = ["red", "yellow", "green", "yellow"], mode = 0;
        function start()
        {
            stop();
            timer = setInterval(() =>
            {
                console.log(mode);
                
                document.querySelector(".block").dataset.color = colors[mode++ % colors.length];
            }, 5000);
        }
        function stop()
        {
            clearInterval(timer);
        }
 
 
 
    </script>
</body>
 
</html>

ЗЫ
Мне не очень понятно было, зачем здесь хтмл формировать скриптом, поэтому у меня он статический.

@tarik_azizov · 11.09.2018, 12:44 **[ТС]**

Чтобы он работал как настоящий.
Кнопка Старт - запускает работу светофора.
Кнопка Стоп - останавливает работу светофора.
Выполнить задание с помощью объекта Date.

Подскажите пожалуйста, хоть как делать, второй день ничего нормального в голову не приходит...

Добавлено через 2 минуты
Как я понял можно разбить цикл работы светофора на 1 минуту(допустим) и должно выводить, в зависимости от текущей секунды, цвет.

@tnfsk · 15.09.2018, 12:33

codepen

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="bb">
<div class="mb1" onclick="fstart();">Поехали!!!</div>
<div class="mb2" onclick="fstop();">СТОП</div>
</div>
 
<div class="ff">
<div class="red" id="red"></div>
<div class="yellow" id="yellow"></div>
<div class="green" id="green"></div>
</div>

JavaScript
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
var tt;
 
var q = 0;
 
function fstart(){
    tt = window.setInterval(mf,1000);
}
 
function fstop(){
    window.clearInterval(tt);
    document.getElementById("green").style.backgroundColor = "white";
    document.getElementById("yellow").style.backgroundColor = "white";
    document.getElementById("red").style.backgroundColor = "white";
}
 
function mf(){
    if(q == 0){
        document.getElementById("yellow").style.backgroundColor = "white";
        document.getElementById("green").style.backgroundColor = "green";
        q = 1;
    }
    
    else if(q == 1){
        document.getElementById("green").style.backgroundColor = "white";
        document.getElementById("yellow").style.backgroundColor = "yellow";
        q = 2;
    }
    
    else if(q == 2){
        document.getElementById("yellow").style.backgroundColor = "white";
        document.getElementById("red").style.backgroundColor = "red";
        q = 3;
    }
    
    else if(q == 3){
        document.getElementById("red").style.backgroundColor = "white"; 
        document.getElementById("yellow").style.backgroundColor = "yellow";
        q = 0;
    }   
}

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
*{
    box-sizing: border-box;
}
 
 
.bb{
    text-align: center;
    margin: 20px 0 40px 0; 
}
 
.mb1{
    display: inline-block;
    padding: 1rem 0;
    border: 1px solid black;
    border-radius: 30px;
    margin-right: 40px;
    width: 150px;
}
 
.mb2{
    display: inline-block;
    padding: 1rem 0;
    border: 1px solid black;
    border-radius: 30px;
    width: 150px;
}
 
 
 
 
.ff{
    margin: 0 auto;
    width: 122px;
    border: 1px solid black;
    border-radius: 30px;
    padding: 20px 20px;
}
 
.red{
    height: 80px;
    border: 1px solid black;
    margin-bottom: 20px;
    border-radius: 30px;
}
 
.yellow{
    height: 80px;
    border: 1px solid black;
    margin-bottom: 20px;
    border-radius: 30px;
}
 
.green{
    width: 80px;
    height: 80px;
    border: 1px solid black;
    border-radius: 30px;
}

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. 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 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@tarik_azizov 0 / 0 / 0 Регистрация: 30.10.2016 Сообщений: 41
	11.09.2018, 12:44 [ТС]
	Чтобы он работал как настоящий. Кнопка Старт - запускает работу светофора. Кнопка Стоп - останавливает работу светофора. Выполнить задание с помощью объекта Date. Подскажите пожалуйста, хоть как делать, второй день ничего нормального в голову не приходит... Добавлено через 2 минуты Как я понял можно разбить цикл работы светофора на 1 минуту(допустим) и должно выводить, в зависимости от текущей секунды, цвет. 0