Javascript Colored Timer Plugin

[Manixat]

Hello freaks,

 

I was just working on this function I needed for my website that converts a timestamp into a colored timer that runs down from green to red. So as I was working it turned out pretty good and I thought I should turn it into a plugin and share it with you guys. For all the help I've been given here that's the least I can do, so here it goes:

 

It takes 3 parameters - Timestamp, Green constant, Color brightness.

 

Timestamp is a unix timestamp

Green constant is a value measured in seconds that will determine from where the coloring will start, everything greater than that constant will be colored green.

Color brightness must be a value between 0 and 1

 

Returns an array of 2 elements, [0] being the time converted into Hours:Minutes:Seconds, [1] being the color in a rgb(x,y,z) format.

 

function colored_timer(t,s,cm){
var e = new Array();
if(t>=0){
var r,g,m,c;
c = t;
e[0] = Math.floor(t/3600);t = t-(e[0]*3600);
e[1] = Math.floor(t/60);t = t-(e[1]*60);
e[2] = t;


for(i=0;i<=2;i++){
if(e[i]<10){
 e[i]="0"+e[i]
}
}
m = 510/s;
(c>=s) ? g=s : g=c;
if(g>=(s/2)){
r=s-g;
g=s/2;
}else{
r=s/2;
}
e[0] = e[0]+":"+e[1]+":"+e[2];
e[1] = "rgb("+Math.floor(r*m*cm)+","+Math.floor(g*m*cm)+",0)";
}else{
e[0] = "Time's Up";
e[1] = "rgb(255,0,0)";
}
return e;
}

 

Enjoy !

 

To test it out you can use this simple code:

 

<script>
var seconds = 10;
setInterval(function(){
colored = colored_timer(seconds,10,1);
document.getElementById('dgd').innerHTML = colored[0];
document.getElementById('dgd').style.color = colored[1];
seconds--;
},1000);
</script>
<div id='dgd'></div>

Edited November 29, 2012 by Manixat

[Adam]

Not bad, though I would have it display immediately, as opposed to waiting a second before showing itself. Also there's not much room for customisation, and I think more people would use it they could set the date/time of an event, as opposed to an arbitrary number of seconds. Lastly, the API leaves a lot to be desired. I would bet that after meeting the functional requirements, the next decision maker for people looking for scripts to use would be the API. They want it easy. Is there no reason you can't just pass in an element and the function update the styles?

[Adam]

Fiddle I created to test it, if it's any use to anyone else: http://jsfiddle.net/MEJKK/