Posted By

darksider on 04/21/10

Tagged

Versions (?)

Last Edited at 04/21/10 06:36pm

Statistics

Viewed 857 times

Favorited by 1 user(s)

Related snippets

JS Clock + Date (Real-Time)

/ Published in: JavaScript

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]

Highlighted TextExpand

Put the following inside your <head> tags of the page you want the clock+date box to appear on.
<script type="text/javascript">

</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;">&nbsp;</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-

URL: http://www.swedger.com

Report this snippet Tweet