<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="count" class="count"></div>
</div>
<style>
.box{width:300px;height:60px;padding:22px 30px;border:300px solid #ccc;border-radius:200px;margin:0 auto;}
.box .count{width:60px;color:#666;font-size:280%;line-height:50px;padding-left:10px;margin-left:5px;border:1px solid #fff}
.box div{margin-left:5px;float:left;width:50px;height:50px;border-radius:10px;border:5px solid #666;}
.gray{background-color:#eee;}
.red{background-color:rgb(230, 190, 190);}
.yellow{background-color:yellow;}
.green{background-color:#26ff00;}
</style>
<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>
3197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
