做一个红绿灯

wp231957 · 发表于 2024-4-16 10:28:13

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

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

x

用html5+JS 做一个模拟道路红绿灯的显示页面
按左右排列三个圆圈分别代表左转直行右转其中右转常绿色旁边一个方框显示倒计时的秒数
要有黄灯闪烁的界面

FishC · 发表于 2024-4-16 10:28:38

好的，我们可以使用HTML和CSS创建一个红绿灯的模拟界面，并使用JavaScript来实现倒计时和闪烁效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红绿灯</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 10px;
        }
        .red {
            background-color: red;
        }
        .yellow {
            background-color: yellow;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="circle red" id="leftCircle"></div>
    <div class="circle yellow" id="middleCircle"></div>
    <div class="circle green" id="rightCircle"></div>
    <div id="countdownBox"></div>

    <script src="script.js"></script>
</body>
</html>

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

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

window.onload = function() {
    var countdownSeconds = 10;
    var countdownBox = document.getElementById("countdownBox");
    var leftCircle = document.getElementById("leftCircle");
    var middleCircle = document.getElementById("middleCircle");
    var rightCircle = document.getElementById("rightCircle");

    function countdown() {
        if (countdownSeconds > 0) {
            countdownSeconds--;
            countdownBox.innerHTML = countdownSeconds + " 秒";
        } else {
            clearInterval(countdownInterval);
            switchLights();
        }
    }

    function switchLights() {
        if (leftCircle.classList.contains("green")) {
            // 切换到右转状态
            leftCircle.classList.remove("green");
            middleCircle.classList.add("yellow");
            middleCircle.classList.add("blink");
            countdownBox.innerHTML = "右转常绿";
        } else {
            // 切换到左转状态
            middleCircle.classList.remove("yellow");
            middleCircle.classList.remove("blink");
            rightCircle.classList.add("green");
            countdownBox.innerHTML = "0 秒";
        }
    }

    var countdownInterval = setInterval(countdown, 1000);
}

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

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

@keyframes blink {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

wp231957 · 发表于 2024-4-16 10:42:42

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

首 ...

目前不对，你这一个倒计时结束就什么都没有了
正常不应该是这样吗
右转绿灯常亮，直行绿左转红直行黄闪左转红直行红左转绿左转红直行绿这样一直下去无休止的
除非没电了

FishC · 发表于 2024-4-16 10:43:01

wp231957 发表于 2024-04-16 10:42
目前不对，你这一个倒计时结束就什么都没有了
正 ...

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

HTML部分：

<div class="traffic-light">
  <div id="left-light" class="light red"></div>
  <div id="straight-light" class="light green"></div>
  <div id="right-light" class="light red"></div>
</div>

CSS部分：

.traffic-light {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.light {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 10px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

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

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

JavaScript部分：

window.onload = function() {
  var leftLight = document.getElementById("left-light");
  var straightLight = document.getElementById("straight-light");
  var rightLight = document.getElementById("right-light");

  function switchLights() {
    // 左转红，直行绿
    leftLight.classList.remove("green");
    leftLight.classList.add("red");
    straightLight.classList.remove("red");
    straightLight.classList.add("green");

    // 直行黄闪
    setTimeout(function() {
      straightLight.classList.add("blink");
    }, 5000);
    
    // 左转绿
    setTimeout(function() {
      straightLight.classList.remove("green");
      straightLight.classList.remove("blink");
      leftLight.classList.remove("red");
      leftLight.classList.add("green");
    }, 7000);

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

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

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

    // 循环执行
    setTimeout(switchLights, 17000);
  }

  switchLights();
};

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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

wp231957 · 发表于 2024-4-16 10:48:30

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

HTML部分：

可是，没有倒计时的数字显示啊

FishC · 发表于 2024-4-16 10:48:53

wp231957 发表于 2024-04-16 10:48
可是，没有倒计时的数字显示啊

非常抱歉，我遗漏了倒计时的数字显示。以下是修正后的代码，其中增加了倒计时的功能：HTML部分：

<div class="traffic-light">
  <div id="left-light" class="light red"></div>
  <div id="straight-light" class="light green"></div>
  <div id="right-light" class="light green"></div>
</div>
<div id="countdownBox">倒计时：<span id="countdownSeconds">10</span> 秒</div>

CSS部分：

.traffic-light {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.light {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 10px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

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

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

JavaScript部分：

window.onload = function() {
  var leftLight = document.getElementById("left-light");
  var straightLight = document.getElementById("straight-light");
  var rightLight = document.getElementById("right-light");
  var countdownSecondsBox = document.getElementById("countdownSeconds");
  var countdownSeconds = 10;

  function countdown() {
    if (countdownSeconds > 0) {
      countdownSeconds--;
      countdownSecondsBox.innerHTML = countdownSeconds;
    }
  }

  function switchLights() {
    // 左转红，直行绿
    leftLight.classList.remove("green");
    leftLight.classList.add("red");
    straightLight.classList.remove("red");
    straightLight.classList.add("green");
    countdownSeconds = 10;
    countdownSecondsBox.innerHTML = countdownSeconds;

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

    // 左转绿
    setTimeout(function() {
      straightLight.classList.remove("green");
      straightLight.classList.remove("blink");
      leftLight.classList.remove("red");
      leftLight.classList.add("green");
    }, 7000);

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

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

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

    // 循环执行
    setTimeout(switchLights, 17000);
  }

  switchLights();
  setInterval(countdown, 1000);
};

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

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

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;
  }
}

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 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册