正文

破解JS实现红绿灯变化技巧，让你轻松制作动态交通指示牌

/0 浏览量
1022

在网页设计中，动态效果能够显著提升用户体验。今天，我们就来探讨如何使用JavaScript（JS）来制作一个简单的动态红绿灯变化效果，模拟真实交通信号灯的变化。

基础概念

首先，我们需要了解红绿灯的基本工作原理。红绿灯通常由三个灯组成：红灯、绿灯和黄灯。它们按照一定的顺序和时间间隔进行切换，以控制交通的流动。

准备工作

在开始编写代码之前，我们需要做一些准备工作：

  1. HTML结构：创建一个简单的HTML结构来展示红绿灯。
  2. CSS样式：添加CSS样式来美化红绿灯的外观。
  3. JavaScript逻辑：编写JavaScript代码来控制红绿灯的切换。

HTML结构

<div id="traffic-light">
  <div class="light red"></div>
  <div class="light green"></div>
  <div class="light yellow"></div>
</div>

CSS样式

#traffic-light {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

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

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

JavaScript逻辑

现在，我们来编写JavaScript代码，实现红绿灯的动态变化。

// 获取红绿灯元素
const redLight = document.querySelector('.red');
const greenLight = document.querySelector('.green');
const yellowLight = document.querySelector('.yellow');

// 定义红绿灯亮起的时间（毫秒）
const redTime = 3000;
const yellowTime = 1000;
const greenTime = 5000;

// 红绿灯切换函数
function changeLight() {
  // 关闭所有灯
  redLight.style.display = 'none';
  greenLight.style.display = 'none';
  yellowLight.style.display = 'none';

  // 红灯亮起
  setTimeout(() => {
    redLight.style.display = 'block';
  }, redTime);

  // 黄灯亮起
  setTimeout(() => {
    yellowLight.style.display = 'block';
  }, redTime + yellowTime);

  // 绿灯亮起
  setTimeout(() => {
    greenLight.style.display = 'block';
  }, redTime + yellowTime + greenTime);

  // 继续循环
  setTimeout(changeLight, redTime + yellowTime + greenTime + redTime);
}

// 启动红绿灯循环
changeLight();

实践与总结

通过以上步骤，我们成功地制作了一个简单的动态红绿灯效果。在实际应用中，你可以根据需要调整灯光亮起的时间，甚至可以添加更多灯和更复杂的逻辑。

希望这篇文章能够帮助你更好地理解如何使用JavaScript制作动态效果。如果你有任何疑问或建议，请随时告诉我。

-- 展开阅读全文 --