html j红绿灯转换倒计时的代码,6.6红绿灯倒计时.html

红绿灯倒计时

.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:red;}

.yellow{background-color:yellow;}

.green{background-color:#26ff00;}

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);

一键复制

编辑

Web IDE

原始数据

按行查看

历史