Website HTML Javascript Clock (Date and Time)

Description

  • This generator allows you to create the Javascript code necessary to put a text clock on your website that can display the current time (and date). The clock keeps updating in real time. Multiple time and date formats to choose from.

Steps

  1. Select how you want your clock/calendar to look
  2. Generate the HTML and JavaScript code for your clock (button at bottom)
  3. Preview your clock at the bottom above the code
  4. Copy and Paste the Source Code into your HTML page

Note

  • If you want to change the size, font, or color you can edit the last line of your generated code and add a style="" property like: <div id="clockbox" style="font:14pt Arial; color:#FF0000;"></div>


Text Clock Format


Source Code
loading clock preview...
JavaScript

Comments

January 6, 2012 - 10:55am — mavr1c

When I use the Clock Friday January 6, 2012 10:33:33 A.M. I would like to display
Today is Friday January 6, 2012 10:33:33 A.M.
Combining the Clock with the Countdown stops the countdown since I call the Clock following the Countdown. I suspect it has something to do with the call to onload
Thank You
I was able to implement your solution to use the include but I now realize why it failed when I tried it
(I have a script that uses onload elsewhere).
Just to clarify I did not copy the two scripts into a single file.

Ideally I should be able to have a single script that delivers both functions instead of having to use two
seperate scripts, one of which steps on the other, but this may be asking too much.

January 10, 2012 - 7:19pm — ricocheting

If you are combining it with the countdown, you can combine the onload events into the single function from the countdown:

window.onload=function(){
GetCount(dateFuture1, 'countbox1'); // for the countdown
GetClock();// for the clock
}

May 4, 2012 - 9:34pm — Anonymous

Thank you very much for this code. Only one question. How to put this code in center.
I tried with next example:
style="text-align: center;">
But this line was deleted automatic.

May 5, 2012 - 11:32pm — ricocheting

You can add style tags to the div tag in the last line:
<div id="clockbox" style="text-align: center;"></div>

April 23, 2013 - 4:13pm — ricocheting

If you want to have the time use a specific timezone, replace: d = new Date();with:
tzOffset = -5;//set this to the number of hours offset from UTC

d = new Date();
dx = d.toGMTString();
dx = dx.substr(0,dx.length -3);
d.setTime(Date.parse(dx))
d.setHours(d.getHours() + tzOffset);
Setting the tzOffset value to the UTC hours offset your timezone has. If you don't know what value to use, when you go to set your clock in Windows, the timezones listed all show their UTC offset. Like (UTC-05:00) Eastern Time which would be -5.

NOTE: Daylight Savings Time is not automatically taken into account. Meaning Eastern Time is normally tzOffset = -5; but Eastern Time on DST is actually tzOffset = -4; value. Sadly there is no good way to account for DST using only JavaScript.

April 23, 2013 - 4:25pm — ricocheting

To get around the Daylight Savings Time bug above, you can use PHP to use the server to calculate the timezone offset and automatically adjust for DST if necessary. However, this does require that the server/page supports PHP (if you aren't sure, it probably does not support PHP).

If you have PHP, replace: d = new Date();with:
d = new Date();
dx = d.toGMTString();
dx = dx.substr(0,dx.length -3);
d.setTime(Date.parse(dx))
d.setSeconds(d.getSeconds() + <?php date_default_timezone_set('America/New_York'); echo date('Z'); ?>);
where 'America/New_York' is the timezone you want to use.
List of Supported Timezones