Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/11: Рейтинг темы: голосов - 11, средняя оценка - 4.73
23 / 7 / 0
Регистрация: 24.04.2018
Сообщений: 411

Эффект светофора

23.10.2021, 09:02. Показов 2068. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть 4 блока, по задумке цвет каждую 1 секунду должен
двигаться вниз по четырём блокам, как на светофоре.

То есть:
1-блок (синий), затем цвет сбрасывается до первоначального
2-блок (красный), сброс цвета.
3-блок (синий), сброс цвета.
4-блок (красный), сброс цвета
и так по кругу

Но я смог проделать это с первым блоком.
Как такую задумку применить ко всем четырём блокам?
Дабы получить эффект светофора.

Ссылка на рабочий пример (Codepen):
https://codepen.io/Viperx/pen/porRJYd

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let a = document.querySelector('.item');
 
const colorMenu = [
{name: 'blue', interval: 1000},
{name: '', interval: 1000},
{name: 'red', interval: 1000},
{name: '', interval: 1000}
];
 
let count = 0;
 
let go = setTimeout(function change() {
if (count === colorMenu.length) {
count = 0;
}
 
a.style.background = colorMenu[count].name;
go = setTimeout(change,colorMenu[count].interval );
count = count + 1;
 
},1000);
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body{   
user-select:none;
}
 
.main{
 
margin-left:200px;  
width:250px;
height: 100px;  
background: blue;
}
 
.item{
height: 100%;   
background: gray;   
margin-bottom: 30px;
}

HTML5
1
2
3
4
5
6
<div class = "main">
<div class = "item" data-color='red'>1</div>
<div class = "item" data-color='blue'>2</div>
<div class = "item" data-color='orange'>3</div>
<div class = "item" data-color='gold'>4</div>
</div>
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
23.10.2021, 09:02
Ответы с готовыми решениями:

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

Как задать кнопке событие переключения цвета светофора?
Подскажите как задать кнопке событие переключения цвета светофора 3 &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot; /&gt; ...

Эффект затухания/появления и слайд эффект
Привет Всем. Подскажите как можно решить эту задачу? Пока с тем что есть выходит криво: $(&quot;#amben&quot;).animate({opacity:...

4
Эксперт JS
6497 / 3908 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
23.10.2021, 11:38
Kerduk,
опишите полностью все цвета четырех блоков в каждый момент времени.
Первый момент:
-----
-----
-----
-----
Второй момент:
-----
-----
-----
-----
Третий момент:
-----
-----
-----
-----
Четвертый момент:
-----
-----
-----
-----


Пока не понятно, что должно происходить.
0
Молодой техлид)
Эксперт JSЭксперт HTML/CSS
 Аватар для mr_dramm
1818 / 1056 / 329
Регистрация: 17.07.2021
Сообщений: 2,147
Записей в блоге: 14
23.10.2021, 14:04
Для этой задачи подходит паттерн state
0
 Аватар для Tavashi
1172 / 762 / 194
Регистрация: 21.05.2016
Сообщений: 1,858
23.10.2021, 14:53
Kerduk, так?
JavaScript
1
2
3
4
5
6
7
8
9
10
let a = document.querySelectorAll('.item');
const colorMenu = ['blue', 'red', 'blue', 'red'];
 
let count = 0;
setInterval(function() {
  count = count % colorMenu.length;
  for (let i=0; i<a.length; i++) a[i].style.background = '';
  a[count].style.background = colorMenu[count];
  count++;
}, 1000)
2
 Аватар для klyapa
3503 / 1267 / 429
Регистрация: 24.07.2016
Сообщений: 1,890
23.10.2021, 19:33
Лучший ответ Сообщение было отмечено Kerduk как решение

Решение

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//независимо от количества цвета и элементов
let elems = document.querySelectorAll('.item'),
    colors = ['gold','gray', 'red', 'green', 'yellow', 'blue'],
    countCol = 0,
    countElem = 0;
 
const changeColor = () => {
 
    if(countCol === colors.length) countCol = 0;
    if(countElem === elems.length) countElem = 0;
    
    if(countElem > 0) elems[countElem - 1].style.backgroundColor = '';
    else elems[elems.length - 1].style.backgroundColor = '';
    
    elems[countElem].style.backgroundColor = colors[countCol];
    
    countCol++, countElem++;
};
 
setInterval(changeColor, 1000);
2
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
23.10.2021, 19:33
Помогаю со студенческими работами здесь

Реализовать эффект масляных красок или эффект акварели
как в C# сделать эффект масляных красок или эффект акварели. у меня есть пример как сделать черно-белый эффект, вот на его основе...

Как сделать эффект размытия (эффект стекла) в Xaml?
Как сделать эффект размытия(эффект стекла) в Xaml?

Как убрать эффект вдавливания с формы? (3d эффект)
Не знаю как задать по конкретней вопрос, поэтому выложу так: вот в местах, где стрелочки какой то стрёмный эффект 3d, все свойства...

Эмулятор светофора
Всех приветствую! Только начал изучать MFC, по этому прошу помощи. Нужно сделать програмку эмулятор светофора. Каждая...

Пример светофора
Здравствуйте, форумчане, прошу помощи по в принципе несложной исполняемой программе в дельфи 7. Дано: светофор работает в ручном и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов.
anaschu 08.04.2026
работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики.
Hrethgir 07.04.2026
Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .
Горе от ума
kumehtar 07.04.2026
Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .
Использование значений реквизитов справочника в документе, с определенными условиями и правами
Maks 07.04.2026
1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию
Maks 07.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .
Уведомление о неверно выбранном значении справочника
Maks 06.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt
8Observer8 05.04.2026
Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .
AkelPad-скрипты, структуры, и немного лирики..
testuser2 05.04.2026
Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru