• 技术文章 >web前端 >前端问答

    react怎么实现红绿灯

    藏色散人藏色散人2023-01-19 15:30:53原创68

    react实现红绿灯的方法:1、引入“import React, { useEffect, useState } from 'react'”;2、创建“function App() {...}”方法;3、定义所有灯信息map;4、定义灯闪烁的方法为“const twinkleFn = ()=>{...}”;5、设置红绿黄颜色样式即可。

    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

    react怎么实现红绿灯?

    用React实现红绿灯

    用 React 实现一个信号灯(交通灯)控制器,要求:

    默认情况下,红灯亮20秒,并且最后5秒闪烁绿灯亮20秒,并且最后5秒闪烁黄灯亮10秒, 次序为:红-绿-黄-红-绿-黄。 灯的个数、颜色、持续时间、闪烁时间、灯光次序都可配置,如: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 : ''}`}></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;
    }

    推荐学习:《react视频教程

    以上就是react怎么实现红绿灯的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:react 引入ant样式不显示怎么办 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react native怎么更改版本• react 怎么设置 style属性• react怎么将时间戳转换成日期• react 引入ant样式不显示怎么办
    1/1

    PHP中文网