Поочерёдная смена цвета страницы

Question

имеется кнопка и следующий список цветов:

var colors = ["#F6F412", "#39F863", "#59FFDF", "#39EDFF", "#5F90FF", "#3400FF", "#E916FF", "#FF0061", "#FF0010", "#ed5a64"];

При нажатии на кнопку один раз скрипт должен начать изменять цвет фона страницы между первым цветом из списка colors и белым цветом "#FFFFFF". При нажатии на кнопку второй раз, цвета фона будут меняться между вторым цветом списка и белым цветом "#FFFFFF". И так далее соответственно. Проще говоря, при каждом клике на кнопку задний фон страницы будет будет изменяться с цвета colors[i] и белым "#FFFFFF".

Крик, прошу о помощи, в js новичёк, на данная задача меня охватила и заинтересовала, но опыта для решения подобной задачи мало, помогите пожалуйста.

Пытался решить задачу с помощью метода setInterval, но получилась путанница и ассинхронная рекурсия :)))

Answer 1

Может так нужно?

Проще говоря, при каждом клике на кнопку задний фон страницы будет будет изменяться с цвета colors[i] и белым "#FFFFFF".

Хотя мой пример по другому работает

let flag = 0
let colors = ["#F6F412", "#39F863", "#59FFDF", "#39EDFF", "#5F90FF", "#3400FF", "#E916FF", "#FF0061", "#FF0010", "#ed5a64"];
btn.addEventListener('click', function colorClick() {
  if (colors.length != flag) {
    console.log(colors[flag])
    flag++
    document.querySelector('body').style.background = colors[flag]
  } else {
    flag = 0
    document.querySelector('body').style.background = '#fff'
  }
})

body {
  background: #fff;
  transition: 2s ease;
}

<button id="btn">click</button>

Answer 2

Если я правильно понял, то по клику на кнопку, цвет фона страницы меняется с белого на цвет из списка. Даже если наоборот то, это не так важно, ниже я добавил 3 варанта.

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

Чтобы плавно менять цвет фона, то можно использовать Element.animate().

Смена цвета с текущего элемента colors на #FFF:

const colors = ["#F6F412", "#39F863", "#59FFDF", "#39EDFF", "#5F90FF", "#3400FF", "#E916FF", "#FF0061", "#FF0010", "#ed5a64"];

const button = document.querySelector('button');

function* color() {
  while (true) {
    yield* colors;
  }
}

const colorGenerator = color();

button.addEventListener('click', () => {
  const prob = colorGenerator.next();
  if (prob.done) colorGenerator.next(true);
  const animation = document.body.animate([{
      background: prob.value
    },
    {
      background: '#FFF'
    },
  ], {
    duration: 1000,
    iterations: 1,
    easing: 'ease'
  });
  animation.addEventListener('finish', () => {
    document.body.style.background = '#FFF';
  });
});

button {
  font-size: 20px;
}

<button>Click</button>

Смена цвета с #FFF на текущий элемент colors:

const colors = ["#F6F412", "#39F863", "#59FFDF", "#39EDFF", "#5F90FF", "#3400FF", "#E916FF", "#FF0061", "#FF0010", "#ed5a64"];

const button = document.querySelector('button');

function* color() {
  while (true) {
    yield* colors;
  }
}

const colorGenerator = color();

button.addEventListener('click', () => {
  const prob = colorGenerator.next();
  if (prob.done) colorGenerator.next(true);
  const animation = document.body.animate([{
      background: '#FFF'
    },
    {
      background: prob.value
    },
  ], {
    duration: 1000,
    iterations: 1,
    easing: 'ease'
  });
  animation.addEventListener('finish', () => {
    document.body.style.background = prob.value;
  });
});

button {
  font-size: 20px;
}

<button>Click</button>

Поочередная смена фона только на цвета из colors без Element.animate():

const colors = ["#F6F412", "#39F863", "#59FFDF", "#39EDFF", "#5F90FF", "#3400FF", "#E916FF", "#FF0061", "#FF0010", "#ed5a64"];

const button = document.querySelector('button');

function* color() {
  while (true) {
    yield* colors;
  }
}

const colorGenerator = color();

button.addEventListener('click', () => {
  const prob = colorGenerator.next();
  if (prob.done) colorGenerator.next(true);
  document.body.style.background = prob.value;
});

body {
  transition: 1s ease;
}
button {
  font-size: 20px;
}

<button>Click</button>

Answer 3

Иногда можно не мудрить:

var colors = ["#F6F412", "#39F863", "#59FFDF", "#39EDFF", "#5F90FF", "#3400FF", "#E916FF", "#FF0061", "#FF0010", "#ed5a64"]
var i = 0

document.body.style.background = colors[0]

document.querySelector("button").addEventListener('click', function () {
  if ((i+=.5) >= colors.length) i = 0
  document.body.style.background = colors[i] ?? "white"
})

<button>Change color</button>

БЛОГ НА HUSL

Поочерёдная смена цвета страницы

Ответы (3 шт):