PDA

View Full Version : Countdown timer.



Cremator
02-12-2012, 03:09 AM
Based on a post in this thread http://www.codingforums.com/showpost.php?p=1192108&postcount=15, the count down timer is made out of elements in the post a script section.

A bit rough and ready, if anyone finds a better route, please post here.
Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function tween(rfcDateBegin,rfcDateEnd){
rfcDateBegin = rfcDateBegin || false;
rfcDateEnd = rfcDateEnd || false;
if( rfcDateBegin && rfcDateEnd ) return new Date(rfcDateEnd).getTime() - new Date(rfcDateBegin).getTime();
return null;
}

Date.prototype.getNextDow = function(dow){
dow = dow || 0;
// finds first dow from day in date object in the month set in the date object and likewise the year.
for(dayNo=this.getDate(); (this.getDate()+9)>dayNo; dayNo++){
futureDate = new Date(this.getFullYear(), this.getMonth() , dayNo);
// we only check forward 9 days, if we don't find anything then we have a problem!
if( futureDate.getDay()==dow ) return futureDate.getTime(); // return date value
}
return false; // we return something because we have to!
}

Number.prototype.convertToReference = function(){

// reduce to seconds
tmp = Math.floor( this / 1000 );
r = [];
days = Math.floor(tmp / ( 60 * 60 * 24 )); // number of days
if( days>0){ r.push( days , " Days, " ); tmp -= ( days * 60 * 60 * 24); }

hours = Math.floor( tmp / ( 60 * 60 ));
if( hours>0){ r.push( hours , " Hrs, " ); tmp -= ( hours * 60 * 60 ); }

minutes = Math.floor( tmp / 60 );
if( minutes>0 ){ r.push( minutes, " Mins, "); tmp -= ( minutes * 60 ); }

r.push( tmp , " Secs.");
return r.join("");

}
function update(){
// get the time now.
nowObj = new Date();
now = new Date().getTime();
// get the nearest Friday from 'now
target = nowObj.getNextDow(5); // 4 == friday
remaining = tween( now , target + offset );
tg.value = remaining.convertToReference ();
}
offset = tween("1 Jan 2012 00:00:00","1 Jan 2012 16:00:00"); // ==57600000 ms, this is midnight to 4pm as milliseconds
setInterval( update , 1000);
</script>
</head>
<body onload="tg=document.getElementById('remain');"><input type="text" id="remain" value="" size="30" />

</body>
</html>

The example above counts down to 4pm on Friday of the current week.

With some modification your able to create a count timer that auto resets, any event that you want to trigger at zero hour will be up to yourselves to implement.