Revision: 26257
Updated Code
at April 29, 2010 11:11 by darksider
Updated Code
Put the following inside your <head> tags of the page you want the clock+date box to appear on. <script type="text/javascript"> <!-- // --------- --------- --------- // Javascript Real-time Clock+Date // Created By Darksider // [email protected] // http://www.swedger.com // --------- --------- --------- // This script is OPEN-SOURCE, // and as such can be downloaded, // modified, and re-distributed // by ANYONE. Though if you do, // PLEASE LEAVE THIS AND ALL OTHER // COMMENT BLOCKS INTACT!! // --------- --------- --------- function freshtime() { var timestamp=new Date(); // - - - FIRST SORT THE TIME - - - \\ var hour=timestamp.getHours();// hours passed today(0-23) var mins=timestamp.getMinutes();// minutes past the hour(0-59) var secs=timestamp.getSeconds();// seconds past the minute(0-59) var period; // variable to contain "am/pm" string if(hour==0) {hour=12;}// turns 0 into 1 (0 is returned for 12 midday and 12 midnight) if(hour>12) {hour=(hour-12);period="pm";} else {period="am";}// if hour is more than 12, deduct 12 and make the period PM - otherwise make period AM if(mins<10) {mins="0"+mins;}// add a trailing zero the the minutes variable if the minutes are less than 10 if(secs<10) {secs="0"+secs;}// also add a trailing zero to the seconds variable if seconds < 10 var curTime=hour+":"+mins+":"+secs+" "+period;// build out curTime string with the 4 blocks(hours:minutes:seconds <am/pm>) // - - - NEXT SORT THE DATE - - - \\ var date=timestamp.getDate();// current date (0-30/31 or 28/29 for February[1]) var month=timestamp.getMonth();// current month (0-11) var year=timestamp.getFullYear();// full year (4-digits) date=(date+1); // add 1 to the date, because they start at 0 (1st day) month=(month+1);// also add 1 because 0 = January if(date==1||date==21||date==31) {date=date+"st";}else if(date==2||date==22) {date=date+"nd";}else if(date==3||date==23) {date=date+"rd";}else {date=date+"th";} // - - - MAKE MONTH TEXTUAL - - - \\ if(month==1) {month="January";}else if(month==2) {month="February";}else if(month==3) {month="March";}else if(month==4) {month="April";} else if(month==5) {month="May";}else if(month==6) {month="June";}else if(month==7) {month="July";}else if(month==8) {month="August";} else if(month==9) {month="September";}else if(month==10) {month="October";}else if(month==11) {month="November";}else if(month==12) {month="December";} var curDate=date+" "+month+" "+year;// build out curDate string with the 3 blocks(date/month/year) // - - - THEN PRINT DATE+TIME - - - \\ document.getElementById("clock").firstChild.nodeValue=curDate+" "+curTime; } //--> </script> that takes care of the hard part, now you just need to tell your page to continually update your clock(we will add the actual clock after this bit). either replace your first <body> tag with the following, or add the onLoad="" part into your current one: <body onLoad="freshtime();setInterval('freshtime()',999);"> the script above tells your page to initialize the time when your page is loaded, and refresh the clock with the current time (and date) every 999 milliseconds (.001 ms off of a second - just because i can!). So all you need now is the clock object for the script to update. I have already created a nice little rectangle box to contain it using CSS. For this example though, I will just use a style="" tag. Copy the following code into wherever you want the clock+date box to appear. (personally, I use CSS position:absolute; to position my stuff wherever I want - gives you more control. but you can just put this at the top/bottom of your page or wherever) <span id="clock" style="border:3px dotted;border-color:#000000;color:#000000;font-size:17;text-align:center;font-weight:bold;"> </span> That's it! You should now have a lovely little real-time box that updates (almost) every second. It adds an "am/pm" suffix to times dependent on the period (morning/afternoon) and also changes the month to a TEXTUAL format. The style stuff in there is to give it a lovely little dotted border. Feel free to modify any part of this script(other than the comments), and redistribute it as you like, but please remember who made it. Please leave my credit in there so that future versions/users can see where the original effor came from - but feel free to even add in your own comment line(s) underneath to say that it was you who added in whatever it is you decide to add in/change. Also- feel free to email me ( darksider(at)swedger(dot)com ) to let me know what you think of my script!! -darksider-
Revision: 26256
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at April 21, 2010 18:36 by darksider
Initial Code
Put the following inside your <head> tags of the page you want the clock+date box to appear on. <script type="text/javascript"> <!-- // --------- --------- --------- // Javascript Real-time Clock+Date // Created By Darksider // [email protected] // http://www.swedger.com // --------- --------- --------- // This script is OPEN-SOURCE, // and as such can be downloaded, // modified, and re-distributed // by ANYONE. Though if you do, // PLEASE LEAVE THIS // COMMENT BLOCK INTACT!! // --------- --------- --------- function freshtime() { var timestamp=new Date(); // - - - FIRST SORT THE TIME - - - \\ var hour=timestamp.getHours();// hours passed today(0-23) var mins=timestamp.getMinutes();// minutes past the hour(0-59) var secs=timestamp.getSeconds();// seconds past the minute(0-59) var period; // variable to contain "am/pm" string if(hour==0) {hour=12;}// turns 0 into 1 (0 is returned for 12 midday and 12 midnight) if(hour>12) {hour=(hour-12);period="pm";} else {period="am";}// if hour is more than 12, deduct 12 and make the period PM - otherwise make period AM if(mins<10) {mins="0"+mins;}// add a trailing zero the the minutes variable if the minutes are less than 10 if(secs<10) {secs="0"+secs;}// also add a trailing zero to the seconds variable if seconds < 10 var curTime=hour+":"+mins+":"+secs+" "+period;// build out curTime string with the 4 blocks(hours:minutes:seconds <am/pm>) // - - - NEXT SORT THE DATE - - - \\ var date=timestamp.getDate();// current date (0-30/31 or 28/29 for February[1]) var month=timestamp.getMonth();// current month (0-11) var year=timestamp.getFullYear();// full year (4-digits) date=(date+1); // add 1 to the date, because they start at 0 (1st day) month=(month+1);// also add 1 because 0 = January if(date==1||date==21||date==31) {date=date+"st";}else if(date==2||date==22) {date=date+"nd";}else if(date==3||date==23) {date=date+"rd";}else {date=date+"th";} // - - - MAKE MONTH TEXTUAL - - - \\ if(month==1) {month="January";}else if(month==2) {month="February";}else if(month==3) {month="March";}else if(month==4) {month="April";} else if(month==5) {month="May";}else if(month==6) {month="June";}else if(month==7) {month="July";}else if(month==8) {month="August";} else if(month==9) {month="September";}else if(month==10) {month="October";}else if(month==11) {month="November";}else if(month==12) {month="December";} var curDate=date+" "+month+" "+year;// build out curDate string with the 3 blocks(date/month/year) // - - - THEN PRINT DATE+TIME - - - \\ document.getElementById("clock").firstChild.nodeValue=curDate+" "+curTime; } //--> </script> that takes care of the hard part, now you just need to tell your page to continually update your clock(we will add the actual clock after this bit). either replace your first <body> tag with the following, or add the onLoad="" part into your current one: <body onLoad="freshtime();setInterval('freshtime()',999);"> the script above tells your page to initialize the time when your page is loaded, and refresh the clock with the current time (and date) every 999 milliseconds (.001 ms off of a second - just because i can!). So all you need now is the clock object for the script to update. I have already created a nice little rectangle box to contain it using CSS. For this example though, I will just use a style="" tag. Copy the following code into wherever you want the clock+date box to appear. (personally, I use CSS position:absolute; to position my stuff wherever I want - gives you more control. but you can just put this at the top/bottom of your page or wherever) <span id="clock" style="border:3px dotted;border-color:#000000;color:#000000;font-size:17;text-align:center;font-weight:bold;"> </span> That's it! You should now have a lovely little real-time box that updates (almost) every second. It adds an "am/pm" suffix to times dependent on the period (morning/afternoon) and also changes the month to a TEXTUAL format. The style stuff in there is to give it a lovely little dotted border. Feel free to modify any part of this script(other than the comments), and redistribute it as you like, but please remember who made it. Please leave my credit in there so that future versions/users can see where the original effor came from - but feel free to even add in your own comment line(s) underneath to say that it was you who added in whatever it is you decide to add in/change. Also- feel free to email me ( darksider(at)swedger(dot)com ) to let me know what you think of my script!! -darksider-
Initial URL
http://www.swedger.com
Initial Description
Creates a DATE and TIME object that can be places on a site. OPEN-SOURCE: Free to download, use, modify and distribute - so long as all Credits/Comments are left INTACT. If you have any thoughts, comments or ideas for this script (or another script you'd like me to have a go at making) then please let me know!! [email protected]
Initial Title
JS Clock + Date (Real-Time)
Initial Tags
javascript, js, date
Initial Language
JavaScript