I wrote jQuery plugin, that simulates work of traffic light. You can see demo here, and the source code:
$.fn.plugin = function (b/*time*/,a/*starting with given color*/) {
b.push(b[1]);//adding phases time to plugin array
return this.each(function (f, d) {
var
e = ["#008000", "#FFFF00", "#FF0000", "#FFFF00"],//green,yellow,red,yellow
c = function () {
$(d).html(b[a])// here i want to place time, that left for current phase, it should change dynamicly
.css({
"background-color": e[a]//changing bg as light
});
window.setTimeout(c, 1000 * b[a]);//hold phase as long as we told to plugin
a = ++a % 4//result would be 0..1..2..3 and so on
};
c()
})
};
$(window).load(function(){
$("#c1").plugin([2,2,2],0);
$("#c2").plugin([2,2,2],2);
})
</head>
<body>
Starts with red:<span id="c1" style=""> </span><br>
Starts with green:<span id="c2" style=""> </span><br>
So, as you can see i'm selecting element, add plugin, writing time of phases for green,yellow,red, and with what color traffic light should begin.
$(d).html(b[a])
This part of code just writing time for current phase. I want to this number showed the time left for the phase.
