|
|
|
Forum Newbie
Group: Forum Members
Last Login: 7/15/2009 9:40:01 AM
Posts: 1,
Visits: 5
|
|
| Hi, I have no knowledge of javascript but the company I work for needed to add a visual countdown clock to our intranet and I magaed to copy and paste a code onto our site and modified the end date we required. I have now been asked to change the font size and add a line of text above the countdown but I am struggling to find information online to assit with adding additional code. I have copied the code below and would be grateful if anybody can help. <script language="JavaScript"> TargetDate = "12/31/2012 09:00 AM"; BackColor = "white"; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "Countdown has completed"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> Thanks
|
|
|
|
|
Junior Member
Group: Forum Members
Last Login: 1/26/2010 8:21:10 PM
Posts: 10,
Visits: 5
|
|
This code may help :
<.script type="text/javascript">
function updateClock ( )
{
var currentTime = new Date ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
// Update the time display
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
To make the clock update every second, we need to use the window.setInterval() method from within the page's body tag to call our updateClock() function once per second. (For more on setInterval, see our tutorial on setTimeout and setInterval.) We should also call updateClock() at the moment the page loads, so that the clock appears straightaway:
<.body onload="updateClock(); setInterval('updateClock()', 1000 )">
That's it! You can see the clock in action on this demo page. We've also added some CSS to the clock container to make it prettier.
Feel free to use any of the above JavaScript code to make a clock for your own website. You might like to try putting the various time components in separate span containers, so that you can style them individually. You could also try converting the code to display a 24-hour clock instead. Have fun!
_behaxor_
|
|
|
|