react写一个亮灯逻辑依次为: 红色显示3秒 绿色显示2秒 黄色显示1秒 三种颜色循环交替显示,要求使用 Promise 实现 页面样式 编写一个显示红绿灯的 HTML 页面,要求使用纯 CSS 实现,效果如图:
时间: 2024-03-10 22:47:36 浏览: 54
好的,关于你的问题,我可以给你提供以下的 React 代码实现:
```jsx
import React, { useState, useEffect } from "react";
const colors = ["red", "green", "yellow"];
const Light = ({ color, active }) => (
<div
className={`light ${color} ${active ? "active" : ""}`}
style={{ backgroundColor: color }}
/>
);
const Lights = () => {
const [activeColorIndex, setActiveColorIndex] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setActiveColorIndex((activeColorIndex) => (activeColorIndex + 1) % 3);
}, 6000);
return () => clearInterval(timer);
}, []);
return (
<div className="lights">
{colors.map((color, index) => (
<Light
key={color}
color={color}
active={index === activeColorIndex}
/>
))}
</div>
);
};
export default Lights;
```
这里使用了 `useState` 和 `useEffect` 来实现灯光的循环显示逻辑。`colors` 是一个数组,其中存储了三种颜色值,即红、绿、黄。`Light` 组件用于显示单个灯光,它接受两个属性值:`color` 和 `active`。前者表示灯光的颜色,后者表示当前灯光是否激活。当一个灯光激活时,它会添加一个名为 `active` 的 CSS 类,用于设置灯光的亮度。`Lights` 组件用于显示三个灯光,并循环显示它们。在组件的 `useEffect` 钩子中,我们使用 `setInterval` 来定时更新 `activeColorIndex` 的值,从而实现灯光的循环显示逻辑。
关于纯 CSS 的实现,可以使用以下代码:
```css
.lights {
width: 150px;
height: 450px;
position: relative;
}
.light {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
opacity: 0.2;
transition: opacity 0.3s ease-in-out;
}
.red {
top: 0;
background-color: red;
}
.green {
top: 150px;
background-color: green;
}
.yellow {
top: 300px;
background-color: yellow;
}
.active {
opacity: 1;
}
```
这里使用了绝对定位和透明度来实现灯光的显示和隐藏。在 `light` 类的样式中,我们设置了 `opacity` 属性为 0.2,表示灯光处于未激活状态时的亮度。在 `active` 类的样式中,我们将 `opacity` 属性设置为 1,从而使得灯光处于激活状态时呈现出最高亮度。使用 `transition` 属性可以让灯光的亮度变化更加平滑。
阅读全文