Bagaimana untuk melaksanakan lampu isyarat secara bertindak balas

Cara melaksanakan lampu isyarat dalam bertindak balas: 1. Perkenalkan "import React, { useEffect, useState } daripada 'react'" 2. Cipta kaedah "function App() {...}"; . Tentukan semua Peta maklumat cahaya 4. Kaedah mentakrifkan kelipan cahaya ialah "const twinkleFn = ()=>{...}" 5. Hanya tetapkan gaya warna merah, hijau dan kuning.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk melaksanakan lampu isyarat sebagai tindak balas?

Gunakan React untuk melaksanakan lampu isyarat

Gunakan React untuk melaksanakan pengawal lampu isyarat (lampu isyarat), keperluan:

Secara lalai , merah Lampu menyala selama 20 saat, dan lampu hijau berkelip selama 20 saat dalam 5 saat terakhir, dan lampu kuning berkelip selama 10 saat dalam 5 saat terakhir Urutannya ialah: merah-hijau-kuning-merah-. hijau-kuning. Nombor, warna, tempoh, masa berkelip dan susunan cahaya lampu boleh dikonfigurasikan, seperti: lights=[{color: '#fff', duration: 10000, twinkleDuration: 5000}, ... ]

import React, { useEffect, useState } from 'react'
import './index.scss'
function App() {
  // 定义当前灯的颜色
  const [currentLight, setCurrentLight] = useState('red')
  // 定义当前灯在灯列表数据中的index
  const [lightOn, setLightOn] = useState(2)

  // 所有灯信息map
  const lights=[
    {
      color: 'red',
      lightTimer: 5000,
      duration: 1000,
      twinkleDuration: 5000
    },
    {
      color: 'green',
      lightTimer: 4000,
      duration: 1000,
      twinkleDuration: 5000
    },
    {
      color: 'yellow',
      lightTimer: 3000,
      duration: 1000,
      twinkleDuration: 0
    }
  ]

  // 改变当前灯在灯map列表的index
  const changeLightFn = () => {
    setLightOn((lightOn + 1) % 3)
  }

  // 灯闪烁的方法
  const twinkleFn = ()=>{
    // 闪烁的次数
    let twinkle_count = 0;
    // 用setInterval定时调用设置等的颜色，实现当前灯颜色亮灭交替闪烁
    let timer = setInterval(()=>{
      // 如果闪烁次数的当前值大于等于当前灯的闪烁时间，就清除计数器，进入下一个灯的列表位置
      if (twinkle_count >= lights[lightOn].twinkleDuration/1000) {
        changeLightFn()
        setCurrentLight('') // 等的颜色清空，显示默认灰色
        clearInterval(timer)
        return
      }
      if (twinkle_count % 2 === 0) {
        setCurrentLight(lights[lightOn].color) // 灯亮
      } else {
        setCurrentLight('') // 灯灭
      }
      twinkle_count++ // 灯的当前闪烁次数累加
    }, lights[lightOn].duration)
  }
  useEffect(()=>{
    setCurrentLight(lights[lightOn].color) // 设置当前灯的颜色 -- 灯亮
    setTimeout(()=>{
      twinkleFn()
    }, lights[lightOn].lightTimer) // 当达到前灯亮持续的时间，开始调用灯闪烁的方法
  }, [lightOn])

  return (
    <div>
      {
        lights.map((item, index) => {
          return (
            <p key={index}><span className={`light ${item.color === currentLight ? item.color : &#39;&#39;}`}></span></p>
          )
        })
      }
    </div>
  );
}
export default App

.light {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: gray;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
}
.yellow {
    background-color: yellow;
}

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lampu isyarat secara bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!