React：每秒更改/迭代元素顏色

編碼世界

    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.log(time)
    const lastEl = time[time.length - 1]
    console.log("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] )

uj5u.com熱心網友回復：

使用 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>

標籤：javascript html css 反应

上一篇：如何記錄滿足if陳述句javascript的可能性

下一篇：我需要反應路由器V5中的嵌套路由