效果图：

杨老师课堂之JavaScript定时器案例的红绿灯设计_html

代码 

<!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>