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

Document

var lamp = {

red: {

obj: document.getElementById('red'),

timeout: 1,

style: ['red', 'gray', 'gray'],

next: 'green'

},

yellow: {

obj: document.getElementById('yellow'),

timeout: 1,

style: ['gray', 'yellow', 'gray'],

next: 'red'

},

green: {

obj: document.getElementById('green'),

timeout: 1,

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

原始数据

按行查看

历史