1

Всем привет! Я хочу сделать так чтобы цвет фона менялось по интервалу. Основной цвет дива у меня желтый, потом должен быть зеленый через 3 секунды, потом через 30 снова желтый а потом через 3 красный, после чего весь процесс должен повториться.

Я не пойму как сделать так, чтобы цвета менялись по очереди. Сейчас цвета меняются по setTimeout .

Мой код:

var bg = document.getElementById("svet");

setTimeout(function Green() {
    bg.style.backgroundColor = document.getElementById("svet").style.backgroundColor = '#2d9219';
}, 3000);

setTimeout(function YellowG() {
    bg.style.backgroundColor = document.getElementById("svet").style.backgroundColor = '#fcbc33';
}, 30000);

setTimeout(function Red() {
    bg.style.backgroundColor = document.getElementById("svet").style.backgroundColor = '#ff0000';
}, 3000);

3
  • Используйте переменную для хранения текущего цвета, либо получайте его из свойств элемента. В зависимости от него задавайте новый цвет и интервал.
    – Akina
    8 окт 2019 в 12:28
  • Спасибо, но не получается , либо я сделаю что-то не так. Можно пример кода ? Я только изучаю JS, поймите правильно плиз ))
    – Kardinal
    8 окт 2019 в 12:33
  • Я его вообще можно сказать что не знаю... но это мне обычно не мешает. Кстати, я бы использовал setInterval и инкрементируемую в пределе от 0 до 11 переменную-счётчик, удобнее, и не надо заботиться о следующем запуске.
    – Akina
    8 окт 2019 в 12:34

2 ответа 2

3

Как это делают ребята в 2019 году:

const changeColorWithDelay = (color = 'white', delay = 1000) =>
  new Promise(resolve => {
    document.body.style.backgroundColor = color;
    // Магия промиса, резолвим промис, только когда прошел таймаут
    setTimeout(resolve, delay);
  });

const animateColors = async (colors = [], intervals = []) => {
  for(let i = 0; i < colors.length; i++) {
    // Дожидаемся таймаута
    await changeColorWithDelay(colors[i], intervals[i]);
  }
}

const runAnimation = async () => {
  // Бесконечный цикл
  while(true) {
    await animateColors(['red', 'green', 'blue', 'yellow'], [3000, 500, 5000]);
  }
}

runAnimation();
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Почитать:

async/await
promise

1
  • 1
    Ребята в 2019 году создают асинхронную функцию sleep и потом навсегда забывают про то, что был такой вот setTimeout :D 8 окт 2019 в 23:24
1

Предлагаю такой вариант. Без promise, а через рекурсию

var bg = document.getElementById("svet");
var colorsAndTime = [
  {color: '#2d9219', time: 3000},
  {color: '#fcbc33', time: 30000},
  {color: '#ff0000', time: 3000},
];
var currentPosition = 0;

function animationColors(currentElement, container) {
  setTimeout(function() {
    container.style.backgroundColor = currentElement.color;
    currentPosition++;
    if (currentPosition === colorsAndTime.length) currentPosition = 0;
    animationColors(colorsAndTime[currentPosition], container);
  }, currentElement.time);
}
animationColors(colorsAndTime[currentPosition], bg);
div {
  width: 100%;
  height: 100px;
}
<div id="svet"></div>

3
  • Спасибо большое
    – Kardinal
    8 окт 2019 в 18:31
  • @Kardinal обращайтесь) 8 окт 2019 в 20:31
  • @Kardinal: поставьте ответу галочку, если он Вам помог 8 окт 2019 в 23:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.