JavaScript原生实现红绿灯

最新推荐文章于 2024-05-02 18:12:22 发布

热乎劲的小仓库

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量1.2k

点赞数 1

文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/YWW_ABC/article/details/130801835

版权

红绿灯样式展示

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div class="lightDiv">
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
  </div>

</body>

</html>
<script>
  // 绿灯10秒 黄灯3秒 红灯10秒 循环执行
  // 获取三个Light盒子
  let light = document.getElementsByClassName('light');
  let greenLight = light[0]; // 绿灯盒子
  let yellowLight = light[1]; // 黄灯盒子 
  let redLight = light[2]; // 红灯盒子
  // 分装一个红绿灯亮灯秩序顺序的一个函数
  // 通过给当前盒子添加class名来改变当前盒子的样式
  function lightFunction () {
    greenLight.setAttribute('class', 'greenLight'); // 绿灯一开始就是亮的
    setTimeout(() => {
      // 十秒之后绿灯灭,黄灯亮
      greenLight.setAttribute('class', 'light');
      yellowLight.setAttribute('class', 'yellowLight');
    }, 10000);

    setTimeout(() => {
      // 黄灯亮三秒后,黄灯灭,红灯亮
      yellowLight.setAttribute('class', 'light');
      redLight.setAttribute('class', 'redLight');
    }, 13000);

    setTimeout(() => {
      // 红灯亮十秒后,红灯灭,绿灯亮
      yellowLight.setAttribute('class', 'light');
      redLight.setAttribute('class', 'light');
      greenLight.setAttribute('class', 'greenLight');
    }, 23000);
  }

  lightFunction(); // 调用红绿灯函数
  // 绿灯黄灯红灯亮灯的总时长(这里总时长为23秒),然后每23秒执行一次红绿灯函数,就形成了循环
  var timer = setInterval(
    function () {
      lightFunction()
    }
    , 23000)


</script>

<style>
  .lightDiv {
    width: 200px;
    padding: 20px;
    border-radius: 10px;
    border: 1px #ccc solid;
    display: flex;
    justify-content: space-between;
  }

  /* 不亮灯时的样式 */
  .light {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #000;
  }

  /* 绿灯时的样式 */
  .greenLight {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: green;
  }

  /* 黄灯时的样式 */
  .yellowLight {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: yellow;
  }

  /* 红灯时的样式 */
  .redLight {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: red;
  }

</style>