Изменение одного слова на другое с изменением цвета. JS, CSS, HTML

Question

Подскажите пожалуйста, как сделать так, чтобы одно слово в тексте менялось автомотически на другое каждые 5 секунд и у каждого слова был свой индивидуалбный цвет. При помощи JS, CSS, HTML.

Answer 1

Самый банальный способ реализовать задуманное - использование функции setInterval в JavaScript. Выглядеть это будет примерно следующим образом:

HTML:

<p>Lorem <span id="word">ipsum</span> dolor sit amet.</p>

JavaScript:

let words = [
  "ipsum",
  "hello",
  "bye",
  "world"
];
let colors = [
  "black",
  "red",
  "green",
  "blue"
];
let currentWord = 0;
let intervalid = setInterval(()=>{
  if (currentWord == words.length - 1)
    currentWord = 0;
  else
    currentWord++;
  let obj = document.getElementById("word");
  obj.style.color = colors[currentWord];
  obj.innerText = words[currentWord];
}, 5000);

Создаёте два массива, в которых описываете слова и цвета, которые хотите устанавливать для слов. Далее используете функцию setInterval, в которую передаёте функцию изменения. Её можно создать отдельно, можно указать прямо в аргументе функции. Чтобы хранить текущий номер цвета, используете отдельную переменную. Также в setInterval передаётся вторым параметром время в миллисекундах, которое отвечает за сам временной интервал.

Данный способ решения простой и наглядный. Можно придумать сложнее, но Вам, я думаю, для начала пойдёт и этот.

БЛОГ НА HUSL

Изменение одного слова на другое с изменением цвета. JS, CSS, HTML

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