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


Source Code
loading clock preview...

Comments

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);
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.

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

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:

     if(ndate>10&&ndate<20){ndate+="th";}
else if(ndate%10==1){ndate+="st";}
else if(ndate%10==2){ndate+="nd";}
else if(ndate%10==3){ndate+="rd";}
else{ndate+="th";}
with superscript, it'll look like
     if(ndate>10&&ndate<20){ndate+="<sup>th</sup>";}
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>";}
else{ndate+="<sup>th</sup>";}

Hi there,

Its an Excelent code. The only problem I face is that I cant use your code separately. For example if I want to display date in the middle of the page and time in the right corner. Whenever I try to change div ID it disappears. Can you please give a hint how to solve that issue. Thank you in advance!

How do I put the date and times on separate lines please?

You can change the display in the line that looks like
document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+""; (note that your line may look different depending on your formatting choices). Change it to something like:

document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+"<br>"+nhour+":"+nmin+":"+nsec+ap+"";
(I simply added a <br> tag between the year and the hour)

Hello, I would like to be able to add the current time zone to display on the 3rd line. I already have the date and time separated, but would like to add the time zone to maje the clock look something like this:

Tuesday, March 8th, 2016
10:16:39AM
CST (GMT -6)

I could just add the 3rd line, but when I do the clock breaks. Thanks for your help! Great clock!

I worked it out! It was to do with the window.onload - I now load all my clocks in the one bit of code rather than within each clock's code and it seems to work. If there is a better way though, please let me know

Yes, it sounds like you got it right. If you want to use multiple clocks on the same page you would need to rename the "GetClock" part on each and then combine the onload parts into one function (otherwise the onload will overwrite each other).

I strongly appreciates your efforts in rendering this assistance to the general public. God bless you and ease your affairs.
My question is that: How can I add two calendar dates to my webpage? that is the gregorian and the Islamic calendar.
Thank You very much

You can have two of my clocks on the same page by renaming the second from "GetClock" to something like "GetClock2" and combining the onload events.

However, the math for calculating the Islamic calendar would require a lot of work. You would be better off just searching for "Javascript Islamic calendar" and using a different script someone already wrote.