设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 做一个红绿灯
返回列表 发新帖
查看: 80|回复: 7

做一个红绿灯

[复制链接]
wp231957
发表于 2024-4-16 10:28:13 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
用html5+JS  做一个模拟道路红绿灯的  显示页面
按左右排列  三个圆圈   分别代表  左转  直行  右转    其中 右转 常绿色  旁边一个方框 显示倒计时的秒数  
要有黄灯闪烁的界面
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

FishC
发表于 2024-4-16 10:28:38 | 显示全部楼层
好的，我们可以使用HTML和CSS创建一个红绿灯的模拟界面，并使用JavaScript来实现倒计时和闪烁效果。

首先，我们需要在HTML文件中创建一个包含三个圆形灯的容器，并为每个灯设置一个唯一的id。然后，使用CSS来设置灯的样式，并通过更改class来控制灯的颜色和闪烁。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>红绿灯</title>
  7.     <style>
  8.         .circle {
  9.             width: 100px;
  10.             height: 100px;
  11.             border-radius: 50%;
  12.             margin: 10px;
  13.         }
  14.         .red {
  15.             background-color: red;
  16.         }
  17.         .yellow {
  18.             background-color: yellow;
  19.         }
  20.         .green {
  21.             background-color: green;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="circle red" id="leftCircle"></div>
  27.     <div class="circle yellow" id="middleCircle"></div>
  28.     <div class="circle green" id="rightCircle"></div>
  29.     <div id="countdownBox"></div>

  31.     <script src="script.js"></script>
  32. </body>
  33. </html>
复制代码


接下来，在JavaScript文件中，我们会按照以下步骤实现红绿灯的逻辑：

1. 定义一个变量`countdownSeconds`来记录倒计时的秒数，并初始化为10；
2. 定义一个函数`countdown()`来执行倒计时，并在倒计时结束后切换灯的状态；
3. 使用`setInterval()`函数来每隔一秒调用`countdown()`函数，实现倒计时效果；
4. 使用`classList`属性来切换灯的颜色和闪烁效果。

  1. window.onload = function() {
  2.     var countdownSeconds = 10;
  3.     var countdownBox = document.getElementById("countdownBox");
  4.     var leftCircle = document.getElementById("leftCircle");
  5.     var middleCircle = document.getElementById("middleCircle");
  6.     var rightCircle = document.getElementById("rightCircle");

  8.     function countdown() {
  9.         if (countdownSeconds > 0) {
  10.             countdownSeconds--;
  11.             countdownBox.innerHTML = countdownSeconds + " 秒";
  12.         } else {
  13.             clearInterval(countdownInterval);
  14.             switchLights();
  15.         }
  16.     }

  18.     function switchLights() {
  19.         if (leftCircle.classList.contains("green")) {
  20.             // 切换到右转状态
  21.             leftCircle.classList.remove("green");
  22.             middleCircle.classList.add("yellow");
  23.             middleCircle.classList.add("blink");
  24.             countdownBox.innerHTML = "右转常绿";
  25.         } else {
  26.             // 切换到左转状态
  27.             middleCircle.classList.remove("yellow");
  28.             middleCircle.classList.remove("blink");
  29.             rightCircle.classList.add("green");
  30.             countdownBox.innerHTML = "0 秒";
  31.         }
  32.     }

  34.     var countdownInterval = setInterval(countdown, 1000);
  35. }
复制代码


最后，我们还需要使用CSS来设置闪烁的效果。我们为黄色信号灯（即中间的灯）添加一个`blink`类，并使用关键帧动画来实现闪烁效果。

  1. .blink {
  2.     animation: blink 0.5s infinite alternate;
  3. }

  5. @keyframes blink {
  6.     from {
  7.         opacity: 1;
  8.     }
  9.     to {
  10.         opacity: 0;
  11.     }
  12. }
复制代码


这样，当页面加载完成后，红绿灯会开始倒计时，10秒后左转灯变为黄色并闪烁，再过10秒右转灯变为绿色。同时，在页面上方会显示倒计时的具体秒数。

希望这个例子对你有帮助！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

wp231957
 楼主| 发表于 2024-4-16 10:42:42 | 显示全部楼层
FishC 发表于 2024-4-16 10:28
好的，我们可以使用HTML和CSS创建一个红绿灯的模拟界面，并使用JavaScript来实现倒计时和闪烁效果。

首 ...

目前 不对，你这一个倒计时结束  就什么都没有了
正常不应该是这样吗
右转绿灯常亮，直行绿  左转红   直行黄闪  左转红   直行红  左转绿  左转红  直行绿   这样一直下去  无休止的
除非没电了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-4-16 10:43:01 | 显示全部楼层
wp231957 发表于 2024-04-16 10:42
目前 不对，你这一个倒计时结束  就什么都没有了
正 ...


抱歉，我之前的回答有一些问题。以下是一种更接近实际红绿灯工作方式的代码实现：

HTML部分：
  1. <div class="traffic-light">
  2.   <div id="left-light" class="light red"></div>
  3.   <div id="straight-light" class="light green"></div>
  4.   <div id="right-light" class="light red"></div>
  5. </div>
复制代码


CSS部分：
  1. .traffic-light {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5.   height: 300px;
  6. }

  8. .light {
  9.   width: 100px;
  10.   height: 100px;
  11.   border-radius: 50%;
  12.   margin: 10px;
  13. }

  15. .red {
  16.   background-color: red;
  17. }

  19. .green {
  20.   background-color: green;
  21. }

  23. .blink {
  24.   animation: blink 0.5s infinite alternate;
  25. }

  27. @keyframes blink {
  28.   from {
  29.     opacity: 1;
  30.   }
  31.   to {
  32.     opacity: 0;
  33.   }
  34. }
复制代码


JavaScript部分：
  1. window.onload = function() {
  2.   var leftLight = document.getElementById("left-light");
  3.   var straightLight = document.getElementById("straight-light");
  4.   var rightLight = document.getElementById("right-light");

  6.   function switchLights() {
  7.     // 左转红，直行绿
  8.     leftLight.classList.remove("green");
  9.     leftLight.classList.add("red");
  10.     straightLight.classList.remove("red");
  11.     straightLight.classList.add("green");

  13.     // 直行黄闪
  14.     setTimeout(function() {
  15.       straightLight.classList.add("blink");
  16.     }, 5000);
  17.    
  18.     // 左转绿
  19.     setTimeout(function() {
  20.       straightLight.classList.remove("green");
  21.       straightLight.classList.remove("blink");
  22.       leftLight.classList.remove("red");
  23.       leftLight.classList.add("green");
  24.     }, 7000);

  26.     // 直行红，左转红
  27.     setTimeout(function() {
  28.       leftLight.classList.remove("green");
  29.       leftLight.classList.add("red");
  30.       straightLight.classList.add("red");
  31.     }, 10000);

  33.     // 直行绿
  34.     setTimeout(function() {
  35.       straightLight.classList.remove("red");
  36.       straightLight.classList.add("green");
  37.     }, 12000);

  39.     // 直行红，左转绿
  40.     setTimeout(function() {
  41.       straightLight.classList.remove("green");
  42.       leftLight.classList.remove("red");
  43.       leftLight.classList.add("green");
  44.     }, 15000);

  46.     // 循环执行
  47.     setTimeout(switchLights, 17000);
  48.   }

  50.   switchLights();
  51. };
复制代码


这段JavaScript代码模拟了一个无休止的红绿灯循环。每个阶段的灯光切换时间间隔可以根据实际需要调整。希望这次的答案能满足你的需求！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

wp231957
 楼主| 发表于 2024-4-16 10:48:30 | 显示全部楼层
FishC 发表于 2024-4-16 10:43
抱歉，我之前的回答有一些问题。以下是一种更接近实际红绿灯工作方式的代码实现：

HTML部分：

可是，没有倒计时的数字显示啊
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-4-16 10:48:53 | 显示全部楼层
wp231957 发表于 2024-04-16 10:48
可是，没有倒计时的数字显示啊


非常抱歉，我遗漏了倒计时的数字显示。以下是修正后的代码，其中增加了倒计时的功能：HTML部分：
  1. <div class="traffic-light">
  2.   <div id="left-light" class="light red"></div>
  3.   <div id="straight-light" class="light green"></div>
  4.   <div id="right-light" class="light green"></div>
  5. </div>
  6. <div id="countdownBox">倒计时：<span id="countdownSeconds">10</span> 秒</div>
复制代码

CSS部分：
  1. .traffic-light {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5.   height: 300px;
  6. }

  8. .light {
  9.   width: 100px;
  10.   height: 100px;
  11.   border-radius: 50%;
  12.   margin: 10px;
  13. }

  15. .red {
  16.   background-color: red;
  17. }

  19. .green {
  20.   background-color: green;
  21. }

  23. .blink {
  24.   animation: blink 0.5s infinite alternate;
  25. }

  27. @keyframes blink {
  28.   from {
  29.     opacity: 1;
  30.   }
  31.   to {
  32.     opacity: 0;
  33.   }
  34. }
复制代码

JavaScript部分：
  1. window.onload = function() {
  2.   var leftLight = document.getElementById("left-light");
  3.   var straightLight = document.getElementById("straight-light");
  4.   var rightLight = document.getElementById("right-light");
  5.   var countdownSecondsBox = document.getElementById("countdownSeconds");
  6.   var countdownSeconds = 10;

  8.   function countdown() {
  9.     if (countdownSeconds > 0) {
  10.       countdownSeconds--;
  11.       countdownSecondsBox.innerHTML = countdownSeconds;
  12.     }
  13.   }

  15.   function switchLights() {
  16.     // 左转红，直行绿
  17.     leftLight.classList.remove("green");
  18.     leftLight.classList.add("red");
  19.     straightLight.classList.remove("red");
  20.     straightLight.classList.add("green");
  21.     countdownSeconds = 10;
  22.     countdownSecondsBox.innerHTML = countdownSeconds;

  24.     // 直行黄闪
  25.     setTimeout(function() {
  26.       straightLight.classList.add("blink");
  27.     }, 5000);

  29.     // 左转绿
  30.     setTimeout(function() {
  31.       straightLight.classList.remove("green");
  32.       straightLight.classList.remove("blink");
  33.       leftLight.classList.remove("red");
  34.       leftLight.classList.add("green");
  35.     }, 7000);

  37.     // 直行红，左转红
  38.     setTimeout(function() {
  39.       leftLight.classList.remove("green");
  40.       leftLight.classList.add("red");
  41.       straightLight.classList.add("red");
  42.     }, 10000);

  44.     // 直行绿
  45.     setTimeout(function() {
  46.       straightLight.classList.remove("red");
  47.       straightLight.classList.add("green");
  48.     }, 12000);

  50.     // 直行红，左转绿
  51.     setTimeout(function() {
  52.       straightLight.classList.remove("green");
  53.       leftLight.classList.remove("red");
  54.       leftLight.classList.add("green");
  55.     }, 15000);

  57.     // 循环执行
  58.     setTimeout(switchLights, 17000);
  59.   }

  61.   switchLights();
  62.   setInterval(countdown, 1000);
  63. };
复制代码

现在倒计时的数字应该会出现在页面上方的倒计时框内，并且在倒计时结束后重新开始计时。希望这次的答案符合你的要求！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

wp231957
 楼主| 发表于 2024-4-16 10:53:27 | 显示全部楼层
FishC 发表于 2024-4-16 10:48
非常抱歉，我遗漏了倒计时的数字显示。以下是修正后的代码，其中增加了倒计时的功能：HTML部分：

C ...

css中，这段代码什么意思，，能解释一下吗

.blink {
  animation: blink 0.5s infinite alternate;
}

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-4-16 10:53:45 | 显示全部楼层
wp231957 发表于 2024-04-16 10:53
css中，这段代码什么意思，，能解释一下吗

.blink  ...


这段CSS代码定义了一个名为 "blink" 的关键帧动画。关键帧动画是一种在不同时间点上定义元素的不同样式的方式，从而实现动画效果。

具体来说：
1. `animation: blink 0.5s infinite alternate;` 表示将应用名为 "blink" 的关键帧动画到具有 "blink" 类的元素上。
   - `0.5s` 表示动画的持续时间为0.5秒。
   - `infinite` 表示动画无限循环。
   - `alternate` 表示动画在每次循环时交替反向播放。

2. `@keyframes blink` 声明了一个名为 "blink" 的关键帧动画。
   - `from` 表示动画的起始状态，此处是设置透明度为1（完全不透明）。
   - `to` 表示动画的结束状态，此处是设置透明度为0（完全透明）。

所以，这段代码的作用就是使具有 "blink" 类的元素在0.5秒内逐渐从完全不透明变为完全透明，然后再反向播放，不断循环以实现闪烁的效果。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-1 03:05

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表