红绿灯的html代码，红绿灯.html
红绿灯倒计时
.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;}
// 获取红、黄、绿灯以及倒计时的元素对象
var lamp = {
red: {
obj: ElementById('red'),
timeout: 30,
style: ['red', 'gray', 'gray'],
next: 'green'
},
yellow: {
obj: ElementById('yellow'),
timeout: 5,
style: ['gray', 'yellow', 'gray'],
next: 'red'
},
green: {
obj: ElementById('green'),
timeout: 35,
style: ['gray', 'gray', 'green'],
next: 'yellow'
},
changeStyle(style) {
}
};
var count = {
obj: ElementById('count'),
change: function(num) {
this.obj.innerHTML = (num < 10) ? ('0' + num) : num; }
};
var now = ;
var timeout = now.timeout;
lamp.changeStyle(now.style);
count.change(timeout);
setInterval(function() {
if (--timeout <= 0) {
now = ];
timeout = now.timeout;
lamp.changeStyle(now.style);
}
count.change(timeout);
}, 1000);
⼀键复制
编辑如何查看html代码
Web IDE
原始数据
按⾏查看
历史

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。