使用前端知识实现红绿灯

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <script>
        const app = document.getElementById("app");
        const sleep = time => new Promise(resovle => setTimeout(resovle, time??0))
        app.changeColor = async function (color, time) {
            this.style.backgroundColor = color;
            await sleep(time);
        }
        var main = async () => {
            while (true) {
                await app.changeColor('red', 1000);
                await app.changeColor('green', 1500);
                await app.changeColor('yellow', 500);
            }
        }
        main();
    </script>
</body>

</html>

tips

 @wx:qq981145483

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 HTML、CSS 和 JavaScript 来实现一个简单的红绿灯。 首先,在 HTML 中创建一个 div 元素,作为红绿灯的容器。然后,使用 CSS 设置容器的大小、颜色和形状。 ```html <div id="traffic-light"></div> ``` ```css #traffic-light { width: 100px; height: 300px; border-radius: 50%; background-color: gray; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } ``` 接下来,在 JavaScript 中,为每个灯泡创建一个 div 元素,并设置它们的初始颜色。然后,定义一个函数来控制灯泡的颜色变化。 ```javascript const colors = { red: 'red', yellow: 'yellow', green: 'green' }; const trafficLight = document.getElementById('traffic-light'); const redLight = document.createElement('div'); redLight.style.backgroundColor = colors.red; redLight.classList.add('light'); trafficLight.appendChild(redLight); const yellowLight = document.createElement('div'); yellowLight.style.backgroundColor = colors.yellow; yellowLight.classList.add('light'); trafficLight.appendChild(yellowLight); const greenLight = document.createElement('div'); greenLight.style.backgroundColor = colors.green; greenLight.classList.add('light'); trafficLight.appendChild(greenLight); let currentLight = 0; function changeLight() { const lights = document.querySelectorAll('.light'); lights[currentLight].style.backgroundColor = colors[Object.keys(colors)[currentLight]]; if (currentLight === 0) { lights[2].style.backgroundColor = colors.gray; } else { lights[currentLight - 1].style.backgroundColor = colors.gray; } currentLight = (currentLight + 1) % lights.length; } setInterval(changeLight, 2000); ``` 最后,我们可以使用 setInterval 函数来定期调用 changeLight 函数,从而控制灯泡的颜色变化。 完整的代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Traffic Light</title> <style> #traffic-light { width: 100px; height: 300px; border-radius: 50%; background-color: gray; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .light { width: 60px; height: 60px; border-radius: 50%; } </style> </head> <body> <div id="traffic-light"></div> <script> const colors = { red: 'red', yellow: 'yellow', green: 'green', gray: 'gray' }; const trafficLight = document.getElementById('traffic-light'); const redLight = document.createElement('div'); redLight.style.backgroundColor = colors.red; redLight.classList.add('light'); trafficLight.appendChild(redLight); const yellowLight = document.createElement('div'); yellowLight.style.backgroundColor = colors.gray; yellowLight.classList.add('light'); trafficLight.appendChild(yellowLight); const greenLight = document.createElement('div'); greenLight.style.backgroundColor = colors.gray; greenLight.classList.add('light'); trafficLight.appendChild(greenLight); let currentLight = 0; function changeLight() { const lights = document.querySelectorAll('.light'); lights[currentLight].style.backgroundColor = colors[Object.keys(colors)[currentLight]]; if (currentLight === 0) { lights[2].style.backgroundColor = colors.gray; } else { lights[currentLight - 1].style.backgroundColor = colors.gray; } currentLight = (currentLight + 1) % lights.length; } setInterval(changeLight, 2000); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值