Website HTML Javascript Clock (Date and Time)


  • 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.


  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


  • 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
Date Format: Time Format:

Source Code
loading clock preview...


Thank you very much for this code. Only one question. How to put this code in center.

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

var d=new Date();
var dx=d.toGMTString();
dx=dx.substr(0,dx.length -3);
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.

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: var d=new Date();with:
var d=new Date();
var dx=d.toGMTString();
dx=dx.substr(0,dx.length -3);
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

I am still receiving a syntax error when inserting the Timezone offset line. I am a beginner, but any suggestions will help. Thank you.

You'll need to either paste your clock code here, or provide a link to where it's hosted so I can test it myself.

You need to use PHP/Javascript to figure out the time difference between the server and the browser then adjust the new Date() accordingly.

For anyone wanting to do this in PHP, replace:
<script type="text/javascript">with:

<script type="text/javascript">
var offset = Math.round(new Date().getTime() / 1000);

and replace
var d=new Date();with:
var d=new Date();
d.setSeconds(d.getSeconds() + <?php echo time(); ?> - offset);

tday=new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
tmonth=new Array("Jänner","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");

To display the same clock in multiple locations, look for the line similar to: document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+""; and change it to
var obj=document.querySelectorAll('.clockbox');
for(var i in obj){
obj[i].innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
note that the last part after .innerHTML= may be different in your code and you will need to keep your differences to retain your clock format choices (my example was using default formatting).

Then use <div class="clockbox"></div> anywhere on the page you want the clock to appear (note that it changed from id="" to class="" attribute)

Is the any way you could add st, nd, rd, th after the date. i.e. 1st and in Superscript

You can add the following block into any GetClock that has a date. Add it under any other if() checks:

else if(ndate%10==1){ndate+="st";}
else if(ndate%10==2){ndate+="nd";}
else if(ndate%10==3){ndate+="rd";}
with superscript, it'll look like
else if(ndate%10==1){ndate+="<sup>st</sup>";}
else if(ndate%10==2){ndate+="<sup>nd</sup>";}
else if(ndate%10==3){ndate+="<sup>rd</sup>";}

Can clock code be created that will display 1/10 & 1/100th seconds:


d.getMilliseconds() will display the value you want. So in the innerHTML="" line, add d.getMilliseconds() like:

You will also need to change your clock to update more often than the default: once every 1000 milliseconds (once per second). Change the update interval to something like 10 milliseconds: setInterval(GetClock,10);

You can do the same thing the minutes/seconds use:

if(nmonth<=9) nmonth="0"+nmonth;
if(ndate<=9) ndate="0"+ndate;
Add those right above the line
document.getElementById('clockbox').innerHTML= .....

You can split the time/date by adding a BR tag to the innerHTML line where you want it to split like

document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+"<br>" +nhour+ ":" +nmin+":" +nsec+ap+"";

Centering, see this comment

Small problem with this code:

if(nmonth<=9) nmonth="0"+nmonth;
if(ndate<=9) ndate="0"+ndate;

Month will appear as 001, but I need 01. Solution?

getMonth() returns "An integer number, between 0 and 11 ... 0 corresponds to January, 1 to February, and so on."

So in my code where it prints, I'm printing "(nmonth+1)" because I want 1=January (instead of 0=January). You get "001" because it's taking the month "0" padding it into "00" then adding +1 into "001"

In your code, you will need to +1 the month before it is zero-padded and converted into a string. So your code will flow something like this

// get the month
var nmonth=d.getMonth();

// turn the original 0=January into 1=January
nmonth += 1;

// zero-padd the month if needed (converts nmonth into string)
if(nmonth<=9) nmonth="0"+nmonth;

// print your nmonth and make sure it's not printing my (nmonth+1)
// .....

Is their a way to display the UTC + _ at the end of the time?

In javascript getTimezoneOffset() will display the current system's time-zone offset in minutes. So with an unmodified version of my script, you'd use
(d.getTimezoneOffset()/60) where you want it to display the amount. So depending on your clock, something like
document.getElementById('clockbox').innerHTML=""+nhour+":"+nmin+":"+nsec+" UTC "+(d.getTimezoneOffset()/60);

If instead you're using my Timezone offset modification, that fudges the timezone and getTimezoneOffset() will still (incorrectly) display your actual system's time-zone offset. With that modification, just print the value of tzOffset. Something like:

document.getElementById('clockbox').innerHTML=""+nhour+":"+nmin+":"+nsec+ap+" UTC "+(tzOffset>=0?"+":"")+tzOffset;

I also added some code to add a "+" symbol before the number if the tzOffset >= 0

I want to put your code on the manager site.
How to make the watch on the site sync with the clock on the server?

The clock works perfectly but it waits until another function is done. How can I get it to start first and continue while the other function is processing?


The other function finds all the records in a table (1,227 listed) using the class and then reformats the date and represents them. It takes about 90 seconds to reformat all of them so I need a display that tells the user something is happening. I prefer a clock to animation. Any ideas?

I don't know how much control you have over your date reformat loop, but you might be able to modify it to give diagnostics info like "387 of 1,227 records processed."

Or alternately use javascript to grab the timestamp of when the page first loads and then every 'x' interval get the current timestamp and print out
"Page Loading: (current timestamp - page load timestamp) Seconds Elapsed"

But yes, the snippet of code you provided should give you the behavior you want where the clock starts updating before (and during) the date reformatting process.

When updating the web page, the clock disappears for a second!
What should I do to not disappear clock?

When refresh the web page, the clock disappears for a second!
What should I do to not disappear clock?

By default, the clock doesn't try to start ticking until the browser finishes downloading all the content. That's what the window.onload part controls. If you want to change that, you can move the
<div id="clockbox"></div> to BEFORE the <script> part. Then change