任务1：制作交通信号灯
任务要求：
利用JavaScript实现交通信号灯，其中，红灯时长为30秒，绿灯时长为35秒，黄灯时长为5秒。。
效果如下图所示：
页面中的3个圆表示3个信号灯，分别是红灯、黄灯和绿灯，绿灯右边的数字35是倒计时，每隔1秒会减1，当减到0时会换灯。
任务分析：
编写HTML页面，创建信号灯外层容器div，在容器中放4个div，分别表示红灯、黄灯、绿灯和倒计时。
创建信号灯对象，分别创建红灯对象、黄灯对象、绿灯对象，以及倒计时对象，然后对象中定义2个方法，分别用于切换下一个灯和设置倒计时数值。
实现信号灯切换效果，设置页面刚打开时显示的灯和倒计时，然后通过setInterval()设置定时器，每隔1秒触发一次，当触发时，将持续时间减1，然后判断持续时间是否小于或等于0，如果判断满足，则需要切换成下一个灯，否则，不切换灯，只更新倒计时。
任务实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="signal.css">
</head>
<body>
<div class="box">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
<div class="second" id="second"></div>
</div>
<script>
var signal = {
red: { //红灯对象
el: document.getElementById("red"),
duration: 30,
style: ["red", "off", "off"],
},
yellow: { //黄灯对象
el: document.getElementById("yellow"),
duration: 5,
style: ["off", "yellow", "off"],
},
green: { //绿灯对象
el: document.getElementById("green"),
duration: 35,
style: ["off", "off", "green"],
},
second: { //倒计时对象
el: document.getElementById("second")
},
change: function (next) { //切换下一个灯
this.red.el.className = next.style[0];
this.yellow.el.className = next.style[1];
this.green.el.className = next.style[2];
},
setNum: function (num) { //设置倒计时数字
this.second.el.innerHTML = num < 10 ? "0" + num : num;
}
};
//为每个灯设置下一个灯对象
signal.red.next = signal.green;
signal.green.next = signal.yellow;
signal.yellow.next = signal.red;
//设置页面刚打开时显示的灯和倒计时
var current = signal.green;
var timeout = current.duration;
signal.change(current);
signal.setNum(timeout);
//设置1秒更新一次倒计时
setInterval(function () {
//如果倒计时小于或等于0，则切换下一个灯
if (--timeout <= 0) {
current = current.next;
timeout = current.duration;
signal.change(current);
}
signal.setNum(timeout);
}, 1000)
</script>
</body>
</html>
css样式下载：
