Posted By

darksider on 04/21/10


Tagged

javascript js time date real clock Realtime darksider


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

darksider


JS Clock + Date (Real-Time)


 / Published in: JavaScript
 

URL: http://www.swedger.com

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!! darksider@swedger.com

  1. Put the following inside your <head> tags of the page you want the clock+date box to appear on.
  2. <script type="text/javascript">
  3. <!--
  4. // --------- --------- ---------
  5. // Javascript Real-time Clock+Date
  6. // Created By Darksider
  7. // [email protected]
  8. // http://www.swedger.com
  9. // --------- --------- ---------
  10. // This script is OPEN-SOURCE,
  11. // and as such can be downloaded,
  12. // modified, and re-distributed
  13. // by ANYONE. Though if you do,
  14. // PLEASE LEAVE THIS AND ALL OTHER
  15. // COMMENT BLOCKS INTACT!!
  16. // --------- --------- ---------
  17. function freshtime() {
  18. var timestamp=new Date();
  19. // - - - FIRST SORT THE TIME - - - \\
  20. var hour=timestamp.getHours();// hours passed today(0-23)
  21. var mins=timestamp.getMinutes();// minutes past the hour(0-59)
  22. var secs=timestamp.getSeconds();// seconds past the minute(0-59)
  23. var period; // variable to contain "am/pm" string
  24. if(hour==0) {hour=12;}// turns 0 into 1 (0 is returned for 12 midday and 12 midnight)
  25. 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
  26. if(mins<10) {mins="0"+mins;}// add a trailing zero the the minutes variable if the minutes are less than 10
  27. if(secs<10) {secs="0"+secs;}// also add a trailing zero to the seconds variable if seconds < 10
  28. var curTime=hour+":"+mins+":"+secs+" "+period;// build out curTime string with the 4 blocks(hours:minutes:seconds <am/pm>)
  29. // - - - NEXT SORT THE DATE - - - \\
  30. var date=timestamp.getDate();// current date (0-30/31 or 28/29 for February[1])
  31. var month=timestamp.getMonth();// current month (0-11)
  32. var year=timestamp.getFullYear();// full year (4-digits)
  33. date=(date+1); // add 1 to the date, because they start at 0 (1st day)
  34. month=(month+1);// also add 1 because 0 = January
  35. 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";}
  36. // - - - MAKE MONTH TEXTUAL - - - \\
  37. if(month==1) {month="January";}else if(month==2) {month="February";}else if(month==3) {month="March";}else if(month==4) {month="April";}
  38. else if(month==5) {month="May";}else if(month==6) {month="June";}else if(month==7) {month="July";}else if(month==8) {month="August";}
  39. else if(month==9) {month="September";}else if(month==10) {month="October";}else if(month==11) {month="November";}else if(month==12) {month="December";}
  40. var curDate=date+" "+month+" "+year;// build out curDate string with the 3 blocks(date/month/year)
  41. // - - - THEN PRINT DATE+TIME - - - \\
  42. document.getElementById("clock").firstChild.nodeValue=curDate+" "+curTime;
  43. }
  44. //-->
  45. </script>
  46.  
  47. 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:
  48. <body onLoad="freshtime();setInterval('freshtime()',999);">
  49.  
  50. 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!).
  51. So all you need now is the clock object for the script to update.
  52. I have already created a nice little rectangle box to contain it using CSS.
  53. For this example though, I will just use a style="" tag.
  54. Copy the following code into wherever you want the clock+date box to appear.
  55. (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)
  56. <span id="clock" style="border:3px dotted;border-color:#000000;color:#000000;font-size:17;text-align:center;font-weight:bold;">&nbsp;</span>
  57.  
  58. That's it!
  59. You should now have a lovely little real-time box that updates (almost) every second.
  60. It adds an "am/pm" suffix to times dependent on the period (morning/afternoon) and also changes the month to a TEXTUAL format.
  61. The style stuff in there is to give it a lovely little dotted border.
  62.  
  63. 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.
  64.  
  65. Also- feel free to email me ( darksider(at)swedger(dot)com ) to let me know what you think of my script!!
  66.  
  67. -darksider-

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: darksider on April 21, 2010

please let me know what you think of this script - the design of both the code and the visual part(box/font/etc...)

You need to login to post a comment.