Светофор. Сделать так, чтобы красный, желтый и зеленый цвета мигали.

@Kurusa · Регистрация: 10.01.2018

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

Есть такой скрипт для светлофора:

HTML5
1
2
3
4
5
6
7
<div class="main_block">
 
    <div class="red active item" data-color="red"></div>
    <div class="yellow item" data-color="yellow"></div>
    <div class="green item" data-color="green"></div>
 
</div>

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
.main_block {
    height: 500px;
    width: 240px;
    background-color: rgba(22, 22, 22, 0.93);
    position: relative;
    left: 50%;
    margin-left: -120px;
    border-radius: 75px;
    display: flex;
    flex-direction: column;
}
 
.red {
    background-color: #000000;
}
.red.active { background-color: red; }
 
.yellow {
    background-color: #000000;
}
.yellow.active { background-color: yellow; }
 
.green {
    background-color: #000000;
}
.green.active { background-color: green; }
 
.item {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    position: relative;
    left: 50%;
    margin: 50px 0 0 -50px;
}

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
    function change(){
 
        var duration = { // сколько времени какой цвет должен светиться
            red: 2,// в конце этот массив используется к функции setTimeout
            yellow: 1,
            green: 3
        };
 
        var container = $(".main_block .active"); // берем элемент из блока main-block с классом active (он там один)
 
        console.log(container.data('color'));
 
        setTimeout(function(){
 
            container.removeClass('active'); // у выше выбраного элемента забираем класс active
 
            var next = container.next();
 
            if( next.length == 0) {
                next = $(".main_block .red");
            }
 
            next.addClass('active');
 
            change();
        }, duration[container.data('color')] * 1000); //из массива duration берем значение ключа, который равен data-color элемента с классом active
    }
 
    change();

https://jsfiddle.net/3h4eLqLo/

где красный цвет изменяется желтым через 2 секунды, желтый зеленым - через 1 секунду, и зеленый красным через 3 секунды.

Вопрос заключается в том, как сделать так, чтобы под конец красный, желтый и зеленый цвета мигали. Никак не пойму.

Помогите, пожалуйста. Возможно кто сможет подсказать алгоритм выполнения

@Balanaar · 17.01.2018, 16:43

Как вариант: https://codepen.io/anon/pen/rpqZzG

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
    var intervalId;
    
    function change(container = $('.main_block .red')){
 
        var duration = { // сколько времени какой цвет должен светиться
            red: 6,// в конце этот массив используется к функции setTimeout
            yellow: 4,
            green: 5
        };
        
        $('.main_block .item').removeClass('active');
        container.addClass('active');
 
        console.log(container.data('color'));
 
        setTimeout(function() {
                intervalId = setInterval(function() {
                container.toggleClass('active');
            }, 500);
        }, duration[container.data('color')] * 1000 / 2);
        
        setTimeout(function(){
 
            var next = container.next();
 
            if( next.length == 0) {
                next = $(".main_block .red");
            }
            
            clearInterval(intervalId);
 
            change(next);
        }, duration[container.data('color')] * 1000); //из массива duration берем значение ключа, который равен data-color элемента с классом active
    }
 
    change();

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .