文章页正文上
本篇内容介绍了“react如何实现红绿灯”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! react实现红绿灯的方法:1、引入“import React, { useEffect, useState } from ‘react’”;2、创建“function App() {…}”方法;3、定义所有灯信息map;4、定义灯闪烁的方法为“const twinkleFn = ()=>{…}”;5、设置红绿黄颜色样式即可。用React实现红绿灯用 React 实现一个信号灯(交通灯)控制器,要求:默认情况下,红灯亮20秒,并且最后5秒闪烁绿灯亮20秒,并且最后5秒闪烁黄灯亮10秒, 次序为:红-绿-黄-红-绿-黄。 灯的个数、颜色、持续时间、闪烁时间、灯光次序都可配置,如:lights=[{color: ‘#fff’, duration: 10000, twinkleDuration: 5000}, … ]
importReact,{useEffect,useState}from'react' import'./index.scss' functionApp(){ //定义当前灯的颜色 const[currentLight,setCurrentLight]=useState('red') //定义当前灯在灯列表数据中的index const[lightOn,setLightOn]=useState(2) //所有灯信息map constlights=[ { 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 constchangeLightFn=()=>{ setLightOn((lightOn+1)%3) } //灯闪烁的方法 consttwinkleFn=()=>{ //闪烁的次数 lettwinkle_count=0; //用setInterval定时调用设置等的颜色,实现当前灯颜色亮灭交替闪烁 lettimer=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({ lights.map((item,index)=>{ return(); } exportdefaultApp) }) }
.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; }
“react如何实现红绿灯”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!
相关推荐: BootStrap glyphicons字体图标如何实现
这篇文章主要介绍“BootStrap glyphicons字体图标如何实现”,在日常操作中,相信很多人在BootStrap glyphicons字体图标如何实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”BootStrap g…
文章页内容下