{...}" ; 5. Définissez les styles de couleur rouge, vert et jaune."/> {...}" ; 5. Définissez les styles de couleur rouge, vert et jaune.">
Maison > Article > interface Web > Comment implémenter des feux de circulation en réaction
Comment implémenter les feux de circulation dans React : 1. Introduisez "import React, {useEffect, useState } from 'react'" ; 2. Créez la méthode "function App() {...}" 3. Définissez toutes les lumières ; cartes d'informations ; 4. La méthode de définition de la lumière clignotante est "const twinkleFn = ()=>{...}" ; 5. Définissez les styles de couleurs rouge, vert et jaune.
L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.
Comment implémenter les feux tricolores en React ?
Utilisez React pour implémenter des feux de circulation
Utilisez React pour implémenter un contrôleur de feux de signalisation (feux de circulation), exigences :
Par défaut, le voyant rouge sera allumé pendant 20 secondes et le voyant vert clignotera pendant 20 secondes au cours des 5 dernières secondes et des 5 dernières secondes. Le voyant jaune clignote pendant 10 secondes dans l'ordre : rouge-vert-jaune-rouge-vert-jaune. Le nombre, la couleur, la durée, le temps de clignotement et l'ordre d'éclairage des lumières peuvent être configurés, tels que : lumières = [{couleur : '#fff', durée : 10 000, 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 : ''}`}></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; }
Recommandé apprentissage : "tutoriel vidéo React"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!