/* 2008 Matthew Ainge & LlamaLAN */ /* Countdown v2.0 build begun 04 February 2008 13:10 */ // Countdown // The countdown duration is not calculated on the client. The server stores the difference from now till then and used by // the countdown functions. We also cannot depend on the interval being exact if based on client time. // This is so erroneous time or date settings on the client PC do not affect the actual countdown time. // Client timestamps are only used to determine how much closer we are since the page loaded. // // To use this function, alter the html tag to include the OnLoad attribute e.g. /* Variables set by YOU! */ // var usingLocalTimezone = false; // For now, this code assumes the PHP server is in the UK. // If we want the countdown to hit 0 at midnight in the client's country, set this to true. // If the event is specific to the UK, it's more accurate to set this to false. var usingPlurals = false; // If true, taps an 's' on the end of the label for each time unit, if required (i.e. if not 1 left) var updateFrequencyinMS = 1000; // Number of milliseconds between updates. If every second, 1000. // NOTE - because of how the numbers are rounded it would look better to use more frequent // updates. Otherwise, the seconds seem to freeze and jump occasionally. var showMilliseconds = false; // If you want a more dramatic flurry of milliseconds set to true. var dayAnnounceText = "The Llama Has Landed!" // What appears when we have arrived at the event's date and time // Strings used for each time unit. Do not make it plural. // These could simply be colons (:) with the usingPlurals flag set to false to give it a digital style // Use your imagination. Go wild. var weekLabel = ":"; // Weeks var dayLabel = ":"; // Days var hourLabel = ":"; // Hours var minuteLabel = ":"; // Minutes var secondLabel = ""; // Seconds /* Variables NOT set by YOU! */ // var serverTimeAtLoad; // serverTimeAtLoad is the PHP timestamp (seconds since UNIX epoch) according to the server at the time of render. var eventTime; // eventTime is the PHP timestamp (seconds since UNIX epoch) of the significant day var clientTimeAtLoad; // Collects the timestamp according to the client's PC, stored when the page runs once only var clientTimeCurrently; // Gets the current timestamp according to the client PC every second. var wp, dp, hp, mp, sp; // set up other necessary variables // Let us begin if (usingPlurals) { // prepare the pluralisation! var theLetterS = "s"; } function getGoing() { // getGoing kicks the whole thing off if (usingLocalTimezone) { var visitortime = new Date(); // We can nab the client's local Timezone if(visitortime) { var visTZ = visitortime.getTimezoneOffset()/60; // Get the offset in hours if(visTZ != 0) { if(visTZ < 0) { visTZ = visTZ * -1; } document.getElementById('countTZ').innerHTML = "(Adjusted for your timezone)"; } } } d=new Date(); // PHP code has written the server's NOW timestamp into countServerTime div serverTimeAtLoad = parseInt(document.getElementById('countServerTime').innerHTML); // PHP code has written the server's event timestamp into countServerEventTime div eventTime = parseInt(document.getElementById('countServerEventTime').innerHTML); // If using client timezone, add the offset to the NOW timestamp. // e.g. in the UK, the event day is 2008-10-08 00:00:00, and the time on the server is 2008-10-07 22:00:00. // in the UK, there are 2 hours to go. In Spain, there are 3 hours to go till the next day. if (usingLocalTimezone) { serverTimeAtLoad += visTZ * 3600; } serverTimeAtLoad *= 1000; // Gets it to the same precision as JS (to milliseconds) eventTime *= 1000; // Gets it to the same precision as JS (to milliseconds) clientTimeAtLoad = d.getTime(); // Assign the current client's javascript timestamp to clientTimeAtLoad. // This is not changed until page refresh. // Shift the check of day into the function. // dont' forget to include clearInterval when the dayAnnounce string is displayed. // Do an initial run immediately update(); // Run the update() function at the interval set by updateFrequencyInMS intervalID = window.setInterval("update()", updateFrequencyinMS); } function update() { d2=new Date(); // Every update, find the new client timestamp clientTimeCurrently = d2.getTime(); // Get the clients timestamp // Find the difference between this moment and the time when the page was loaded. vTimeDiff = Math.round(clientTimeCurrently - clientTimeAtLoad); // Now, we can use this time difference to build on the actual time and date as reported // by the server. We do NOT rely on the client's PC for our actual date and time. // Find out how far along we are from the server's time since the page was loaded. serverTimeCurrently = serverTimeAtLoad+vTimeDiff; // If this time is greater than the server's event timestamp, display the message if(serverTimeCurrently > eventTime) { document.getElementById('theDay').innerHTML = dayAnnounceText; window.clearInterval(intervalID); // Stop the regular update } else { // Otherwise, we continue to count down // Time left is the server's event timestamp minus the time passed since page load. // Exciting stuff. millisecondsUntilEvent = eventTime - serverTimeCurrently; // The next block works out how much time is left in each unit of measurement weeks = Math.floor(millisecondsUntilEvent/604800000); millisecondsUntilEvent -= weeks * 604800000; days = Math.floor(millisecondsUntilEvent/86400000); millisecondsUntilEvent -= days * 86400000; hours = Math.floor(millisecondsUntilEvent/3600000); millisecondsUntilEvent -= hours * 3600000; minutes = Math.floor(millisecondsUntilEvent/60000); millisecondsUntilEvent -= minutes * 60000; seconds = millisecondsUntilEvent/1000; // Want to kill off any pluralisation of these strings, in case the last update added an S. sp = secondLabel; mp = minuteLabel; hp = hourLabel; dp = dayLabel; wp = weekLabel; // If the update is less than a second, let's display the milliseconds if(showMilliseconds) { seconds = seconds.toFixed(3); } else { seconds = Math.floor(seconds); } // If using plurals, lets add them if needed. if(usingPlurals) { if (seconds != 1) sp += theLetterS; if (minutes != 1) mp += theLetterS; if (hours != 1) hp += theLetterS; if (days != 1) dp += theLetterS; if (weeks != 1) wp += theLetterS; } // If any measurement is less than 10, pad out the result to look nice. if(seconds < 10) seconds = "0" + seconds; if(minutes < 10) minutes = "0" + minutes; if(hours < 10) hours = "0" + hours; if(days < 10) days = "0" + days; if(weeks < 10) weeks = "0" + weeks; // Now place the formatted unit count strings into the proper divs in the countdown block. document.getElementById('countS').innerHTML = seconds; document.getElementById('countM').innerHTML = minutes; document.getElementById('countH').innerHTML = hours; document.getElementById('countD').innerHTML = days; document.getElementById('countW').innerHTML = weeks; // Now place the formatted labels into the proper divs document.getElementById('secondP').innerHTML = sp; document.getElementById('minuteP').innerHTML = mp; document.getElementById('hourP').innerHTML = hp; document.getElementById('dayP').innerHTML = dp; document.getElementById('weekP').innerHTML = wp; // Keep the timezone area cleared document.getElementById('timezone').innerHTML = ""; } }