红绿灯计时器

最新推荐文章于 2023-06-29 14:52:12 发布

吴默涵1

最新推荐文章于 2023-06-29 14:52:12 发布

阅读量735

点赞数

本文链接：https://blog.csdn.net/wu964521/article/details/101670408

版权

 <!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 id="count" class="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>