Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.89/9: Рейтинг темы: голосов - 9, средняя оценка - 4.89
-106 / 7 / 0
Регистрация: 24.04.2018
Сообщений: 408
1

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

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

Author24 — интернет-сервис помощи студентам
Есть 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)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
23.10.2021, 09:02
Ответы с готовыми решениями:

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

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

Эффект затухания/появления и слайд эффект
Привет Всем. Подскажите как можно решить эту задачу? Пока с тем что есть выходит криво:...

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

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

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


Пока не понятно, что должно происходить.
0
молодой
1641 / 905 / 291
Регистрация: 17.07.2021
Сообщений: 1,852
Записей в блоге: 12
23.10.2021, 14:04 3
Для этой задачи подходит паттерн state
0
1115 / 762 / 194
Регистрация: 21.05.2016
Сообщений: 1,859
23.10.2021, 14:53 4
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
3466 / 1245 / 424
Регистрация: 24.07.2016
Сообщений: 1,855
23.10.2021, 19:33 5
Лучший ответ Сообщение было отмечено 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
23.10.2021, 19:33
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.10.2021, 19:33
Помогаю со студенческими работами здесь

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

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

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

Создание светофора
Необходимо составить светофор, и сделал самые простые 3 круга разных цветов. А как им добавить time...

Анимация светофора
Помогите осуществить анимацию светофора, циклическое закрашивания 3-х кругов.

Регулировка светофора
моделирования управления движением на уличном перекрестке. Движение на каждой из 3-х прилегающих к...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru