红绿灯倒计时

最新推荐文章于 2023-03-01 17:12:17 发布

wq199904

最新推荐文章于 2023-03-01 17:12:17 发布

阅读量3.2w

点赞数

本文链接：https://blog.csdn.net/wq199904/article/details/101473207

版权

在这里插入代码片

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>红绿灯倒计时</title>
    <style>
      .box{width:250px;height:52px;padding:15px 30px;border:2px solid #ccc;border-radius:16px;margin:0 auto;}
      .box .count{width:60px;color:#666;font-size:280%;line-height:50px;padding-left:6px;margin-left:5px;border:1px solid #fff}
      .box div{margin-left:5px;float:left;width:50px;height:50px;border-radius:50px;border:1px solid #666;}
      .gray{background-color:#eee;}
      .red{background-color:red;}
      .yellow{background-color:yellow;}
      .green{background-color:#26ff00;}
    </style>
  </head>
  <body>
    <div class="box">
      <div id="red"></div>
      <div id="yellow"></div>
      <div id="green"></div>
      <div class="count" id="count"></div>
    </div>
    <script>
      // 获取红、黄、绿灯以及倒计时的元素对象
      var lamp = {
        red: {
          obj: document.getElementById('red'),
          timeout: 30,
          style: ['red', 'gray', 'gray'],
          next: 'green'
        },
        yellow: {
          obj: document.getElementById('yellow'),
          timeout: 5,
          style: ['gray', 'yellow', 'gray'],
          next: 'red'
        },
        green: {
          obj: document.getElementById('green'),
          timeout: 35,
          style: ['gray', 'gray', 'green'],
          next: 'yellow'
        },
        changeStyle(style) {
          this.red.obj.className = style[0];
          this.yellow.obj.className = style[1];
          this.green.obj.className = style[2];
        }
      };
      var count = {
        obj: document.getElementById('count'),
        change: function(num) {
          this.obj.innerHTML = (num < 10) ? ('0' + num) : num;
        }
      };
      var now = lamp.green;
      var timeout = now.timeout;
      lamp.changeStyle(now.style);
      count.change(timeout);
      setInterval(function() {
        if (--timeout <= 0) {
          now = lamp[now.next];
          timeout = now.timeout;
          lamp.changeStyle(now.style);
        }
        count.change(timeout);
      }, 1000);
    </script>
  </body>
</html>

wq199904

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
红绿灯倒计时

在这里插入代码片<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>红绿灯倒计时</title> <style> .box{width:250px;height:52px;padding:15px 30p...
复制链接

扫一扫