Custom countdown timer
Posted: Mon Jan 22, 2007 2:50 pm
I have modified the code from //http://www.ajaxpath.com/javascript-timer/ to suit my needs, but it doesn't work all the time. I need it to count down to 4 different times, spaced 6 hours apart, every day.
GMT 01:25
GMT 07:25
GMT 13:25
GMT 19:25
For some reason, it works as planned when within 2 of the timespans. On the other two, it adds 18 hours to the countdown.
The javascript code.
The php code.
(note: for some reason, cnt2.js does not work today. I've had this problem before where it displays when it wants to. cnt.js seems to display all the time. I have no clue why it shows up sometimes.)
GMT 01:25
GMT 07:25
GMT 13:25
GMT 19:25
For some reason, it works as planned when within 2 of the timespans. On the other two, it adds 18 hours to the countdown.
The javascript code.
Code: Select all
//http://www.ajaxpath.com/javascript-timer/
// temporary date to check for current building tick
var localtime = new Date();
var localhour = localtime.getHours();
var localminutes = localtime.getMinutes();
if (localhour >= 19 && localhour < 24) || (localhour < 1) {hour = 1;}
else if (localhour >= 1 && localhour < 7) {hour = 7;}
else if (localhour >= 7 && localhour < 13) {hour = 13;}
else if (localhour >= 13 && localhour < 19) {hour = 19;}
var month = '*';
var day = '+0';
var dow = 0;
var minute = 25;
var tz = -6;
var lab = 'cd';
function start() {displayCountdown(setCountdown(month,day,hour,tz),lab);}
loaded(lab,start);
var pageLoaded = 0; window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {if (document.getElementById && document.getElementById(i) != null) f(); else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}
function setCountdown(month,day,hour,tz) {
var m = month;
if (month=='*') m = 0;
var c = setC(m,day,hour,tz);
if (month == '*' && c < 0) c = setC('*',day,hour,tz); return c;}
function setC(month,day,hour,tz) {
var toDate = new Date();
if (day.substr(0,1) == '+') {
var day1 = parseInt(day.substr(1));toDate.setDate(toDate.getDate()+day1);}
else {toDate.setDate(day);}
if (month == '*')toDate.setMonth(toDate.getMonth() + 1);
else if (month > 0) {
if (month <= toDate.getMonth())toDate.setYear(toDate.getYear() + 1);toDate.setMonth(month-1);}
if (dow >0) toDate.setDate(toDate.getDate()+(dow-1-toDate.getDay())%7);
toDate.setHours(hour);
toDate.setMinutes(minute-(tz*60));
toDate.setSeconds(0);
var fromDate = new Date();
fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());
var diffDate = new Date(0);
diffDate.setMilliseconds(toDate - fromDate);
return Math.floor(diffDate.valueOf()/1000);
}
function displayCountdown(countdn,cd)
{
if (countdn < 0) document.getElementById(cd).innerHTML = "Building tick has occured. Please refresh"; else
{
var secs = countdn % 60;
if (secs < 10) secs = '0'+secs;
var countdn1 = (countdn - secs) / 60;
var mins = countdn1 % 60;
if (mins < 10) mins = '0'+mins;
countdn1 = (countdn1 - mins) / 60;
var hours = countdn1 % 24;
var days = (countdn1 - hours) / 24;
document.getElementById(cd).innerHTML = hours+':'+mins+':'+secs;
setTimeout('displayCountdown('+(countdn-1)+',\''+cd+'\');',999);
}
}(note: for some reason, cnt2.js does not work today. I've had this problem before where it displays when it wants to. cnt.js seems to display all the time. I have no clue why it shows up sometimes.)
Code: Select all
<!-- http://www.ajaxpath.com/javascript-timer/ -->
<!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 type="text/javascript" src="js/cnt2.js"></script>
</head>
<body>
Next building tick: <span id="cd"></span>
<br /><br />
Your local hour: <script type="text/javascript">document.write(localhour)</script><br />
Next building tick hour: <script type="text/javascript">document.write(hour)</script>
</body>
</html>