原生js实现红绿灯效果

最新推荐文章于 2024-02-10 18:42:53 发布

我爱画页面

最新推荐文章于 2024-02-10 18:42:53 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/qdm13209211861/article/details/103435688

版权

原生js实现红绿灯效果，直接附代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    div {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid black;
      text-align: center;
      line-height: 50px;
      font-size: 30px;
      font-weight: bold;
      color: white;
    }
    #redLight {
      background-color: white;
    }
    #greenLight {
      background-color: white;
    }
    #yellowLight {
      background-color: white;
    }
  </style>
</head>

<body>
  <div id="redLight"></div>
  <br />
  <div id="greenLight"></div>
  <br />
  <div id="yellowLight"></div>
</body>

</html>
<script type="text/javascript">
  //红灯亮五秒，绿灯亮3秒，黄灯亮2秒，如何让
  //三个灯不断交替重复亮灯

  //红灯的函数
  function redFunc(count) {
    //1、让红灯的div变红，并且把秒数写上
    $("#redLight").innerHTML = count;
    $("#redLight").style.backgroundColor = "red";
    let p = new Promise(function (resolve, reject) {
      //2、启动定时器，计时
      var myTimer = setInterval(() => {
        count--;
        if (count <= 0) {
          window.clearInterval(myTimer);
          $("#redLight").innerHTML = "";
          $("#redLight").style.backgroundColor = "white";
          resolve();
          return;
        }
        $("#redLight").innerHTML = count;
      }, 1000);
    });
    return p;
  }

  function greenFunc(count) {
    //1、让红灯的div变红，并且把秒数写上
    $("#greenLight").innerHTML = count;
    $("#greenLight").style.backgroundColor = "green";
    let p = new Promise(function (resolve, reject) {
      //2、启动定时器，计时
      var myTimer = setInterval(() => {
        count--;
        if (count <= 0) {
          window.clearInterval(myTimer);
          $("#greenLight").innerHTML = "";
          $("#greenLight").style.backgroundColor = "white";
          resolve();
          return;
        }
        $("#greenLight").innerHTML = count;
      }, 1000);
    });
    return p;
  }

  function yellowFunc(count) {
    //1、让红灯的div变红，并且把秒数写上
    $("#yellowLight").innerHTML = count;
    $("#yellowLight").style.backgroundColor = "yellow";
    let p = new Promise(function (resolve, reject) {
      //2、启动定时器，计时
      var myTimer = setInterval(() => {
        count--;
        if (count <= 0) {
          window.clearInterval(myTimer);
          $("#yellowLight").innerHTML = "";
          $("#yellowLight").style.backgroundColor = "white";
          resolve();
          return;
        }
        $("#yellowLight").innerHTML = count;
      }, 1000);
    });
    return p;
  }

  function shine() {
    redFunc(5).then(function () { return greenFunc(3); }).then(function () { return yellowFunc(2) }).then(shine);
  }

  window.onload = function () {
    shine();
  }

  function $(str) {
    if (str.charAt(0) == "#") {
      return document.getElementById(str.substring(1));
    } else if (str.charAt(0) == ".") {
      return document.getElementsByClassName(str.substring(1));
    } else {
      return document.getElementsByTagName(str);
    }
  }	
</script>