Реакция: изменение/перебор цвета элемента каждую секунду

Кодирование Мир

    return (
        <div className = "header-container item">
            <div className = "header-item title-container">
                    <h1 className = "title" style = {{color: colour1}}>HELLO</h1>
                    <h1 className = "title" style = {{color: colour2}}>CODING</h1>
                    <h1 className = "title" style = {{color: colour3}}>WORLD</h1>
            </div>
            <div className = "header-item"/>
        </div>
    );

Скажем, у меня есть вышеперечисленное, я хочу перебирать каждый элемент по одному и превращать цвет в золотой.

Таким образом, в любой момент только одно из слов должно быть золотым. Сначала Hello должен быть золотым, затем Coding должен быть золотым, а затем World должен быть золотым.

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

Смотрите мою неудачную попытку ниже

    const d = new Date();
    let time = d.getTime().toString().split("");
    console.info(time)
    const lastEl = time[time.length - 1]
    console.info("lastEl", lastEl)

    const [timer, setTimer] = useState(lastEl)

    const [colour1, setColour1] = useState("white")
    const [colour2, setColour2] = useState("white")
    const [colour3, setColour3] = useState("white")

    useEffect(()=> {
        if (parseInt(lastEl) === 0 || parseInt(lastEl) === 1 || parseInt(lastEl) === 2 || parseInt(lastEl) === 3) {
        setColour1("yellow")
        setColour2("white")
        setColour3("white")
        } else if (parseInt(lastEl) === 4 || parseInt(lastEl) === 5 || parseInt(lastEl) === 6) {
            setColour1("white")
            setColour2("yellow")
            setColour3("white")
        } else {
            setColour1("white")
            setColour2("white")
            setColour3("yellow")
        }
    }, [timer] )

javascript html css reactjs

31.03.2022 17:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используя setInterval, это можно сделать следующим образом.

function App() {
  const [time, setTime] = React.useState(1);
  const [speed, setSpeed] = React.useState(1000);
  const [colour1,setColour1] = React.useState("white");
  const [colour2,setColour2] = React.useState("white");
  const [colour3,setColour3] = React.useState("white");
  const timer = React.useRef(null);
  React.useEffect(() => {
    runInterval();
  }, []);
   React.useEffect(() => {
   
   window.clearInterval(timer.current);
    setTime(1);
    runInterval();
  }, [speed]);
  function runInterval(){
      timer.current = window.setInterval(() => {
        setTime(prevTime => prevTime >= 9 ? 1 : prevTime + 1);
      }, speed);
      return () => {
        window.clearInterval(timer.current);
      };
  }
   React.useEffect(() => {
    if ([1,2,3].includes(time)){
        setColour1("yellow")
        setColour2("white")
        setColour3("white")
    }
    else if ([4,5,6].includes(time)){
        setColour1("white")
        setColour2("yellow")
        setColour3("white")
    }
    else{
       setColour1("white")
       setColour2("white")
       setColour3("yellow")
    }
  }, [time]);
  return (
    <div>Seconds: {time}
    <button onClick = {() => setSpeed(500)}>x2 speed</button>
     <button onClick = {() => setSpeed(1000)}>normal speed</button>
      <div style = {{backgroundColor: "black"}}>
         <h1 className = "title" style = {{color: colour1}}>HELLO</h1>
         <h1 className = "title" style = {{color: colour2}}>CODING</h1>
         <h1 className = "title" style = {{color: colour3}}>WORLD</h1>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

<div id = "app"></div>
<script crossorigin src = "https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

Спасибо за решение! Я очень ценю это. Если бы я хотел ускорить его, как бы вы порекомендовали это сделать?

— 31.03.2022 19:01

@fullStackRyan всегда пожалуйста. скорость может контролировать, если значение таймера в SetInterval преобразуется в состояние. Я обновляю решение, добавляя скорость

— 31.03.2022 19:24

31.03.2022 18:02