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

Comments

May 4, 2012 - 9:34pm — Anonymous

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

May 5, 2012 - 11:32pm — ricocheting

You can add a style attribute to the div tag on the first line:
<div id="clockbox" style="text-align:center;"></div> Other formatting (text font, size, color) can also be added there.

April 23, 2013 - 4:13pm — ricocheting

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.

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

June 5, 2013 - 12:23pm — ricocheting

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

November 13, 2013 - 3:51am — hatschibratschi

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

January 6, 2015 - 1:58pm — ricocheting

To display the same clock in multiple locations, look for the line: document.getElementById('clockbox').innerHTML=clocktext; and change it to 
var obj=document.querySelectorAll('.clockbox');
for(var i in obj){
	obj[i].innerHTML=clocktext;
}
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)

April 27, 2015 - 9:51pm — Anonymous

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

April 28, 2015 - 11:27am — ricocheting

You can add either of the following blocks:

     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";}
or alternately with superscript, it would 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>";}

Add either of those blocks right before the line that starts with

var clocktext=

June 1, 2016 - 1:12pm — Alan Scott

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

23:59:59.99

June 2, 2016 - 10:45am — ricocheting

d.getMilliseconds() will display the value you want. So in the var clocktext= line, add d.getMilliseconds() like:
var clocktext=""+nhour+":"+nmin+":"+nsec+"."+d.getMilliseconds()+"";

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 25 milliseconds: setInterval(GetClock,25);

January 31, 2018 - 1:01pm — Wolf

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

February 1, 2018 - 1:07pm — ricocheting

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
var clocktext=""+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:

var clocktext=""+nhour+":"+nmin+":"+nsec+ap+" UTC "+(tzOffset>=0?"+":"")+tzOffset;

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

August 6, 2018 - 10:57am — ricocheting

You can edit the clocktext="" line to add HTML. Like:

var clocktext="<span style=\"font:14pt Arial; color:#FF00FF;\">"+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+"</span> <span style=\"font:14pt Arial; color:#FF0000;\">"+nhour+":"+nmin+":"+nsec+ap+"</span>";

Note 1: Your display settings might be different depending on which date/time format you chose.
Note 2: Any occurrence of " (quote) in your HTML must be escaped like \" (backslash quote) otherwise you will get Javascript errors.

August 7, 2018 - 11:47am — ricocheting

The best way would be to temporarily make the colon visibility:hidden (thanks Jan for the suggestion). Try replacing the line that starts with
var clocktext=
line with this conditional one: 
// if first half of second, hide colons
if(d.getMilliseconds()<500){
	var clocktext=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+"<span style='visibility:hidden'>:</span>"+nmin+"<span style='visibility:hidden'>:</span>"+nsec+ap+"";
}
// top half of second, display original line
else{
	var clocktext=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
}
Note that your clocktext line might be different depending on your display options. You'll also want to make your clock update more than every 1000 milliseconds (once per second). Change the update interval to something like 250 milliseconds:
setInterval(GetClock,250);

February 3, 2021 - 10:23am — Michon

Hello, ricocheting.
With the aid of your generator the resulting code helps display time and date as a straight line (Mercredi, Fevrier 3, 2021 16:58). Is it possible to make this information display as stacked? With an added info underneath?

Such as:

Mercredi, 3 Fevrier, 2021
16:58 (bolded)
C'est APRESMIDI

(It would be of great help if C'est MATIN displayed between 06:00 and 11:00, C'est APRESMIDI between 12:00 and 19:00, and C'est NUIT between 20:00 and 00:00)

I do not require additional sophisticated tricks like the ones mentioned in above comments (seconds, milliseconds, blinking : etc., although it's really awesome that you know how to add cool features like that), as long as the font is very large (so that a person with visual impairment can see it well) and displays these key information stacked clearly. It would be amazing and very helpful so one will never be confused about whether it's night or day, or what day of the week it is, what hour etc.

Thank you very much for taking the time to read my message! Many thanks for your aid! m(_ _)m

========================================================
I think I only got the French translations right. I don't know anything about coding languages, but I wanted to at least give it a try first before bothering you with my request. Thank you for your kindness.

<div id="clockbox" style="text-align:center;font:16pt Arial; color:#FF0000;"></div>

<script type="text/javascript">
var tday=["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
var tmonth=["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];

function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
var nhour=d.getHours(),nmin=d.getMinutes();
if(nmin<=9) nmin="0"+nmin

var clocktext=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+"";
document.getElementById('clockbox').innerHTML=clocktext;
}

GetClock();
setInterval(GetClock,1000);
</script>

February 3, 2021 - 1:33pm — ricocheting

You can add specific HTML formatting to the "clocktext" line like:

var clocktext='<h1>'+tday[nday]+', '+tmonth[nmonth]+' '+ndate+', '+nyear+'</h1><h2>'+nhour+':'+nmin+'</h2>';

Your time-of-day greeting is a bit more complicated and you'll have to check if the "nhour" value is between certain hour ranges like:

var greeting="";

if(nhour>=6 && nhour<=11){
greeting="C'est MATIN";
}

else if(nhour>=12 && nhour<=19){
greeting="C'est APRESMIDI";
}

else if(nhour>=20){
greeting="C'est NUIT";
}

then add "greeting" variable to the "clocktext" line. So your overall code will look something like:

<div id="clockbox" style="text-align:center; font:16pt Arial;"></div>

<script type="text/javascript">
var tday=["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
var tmonth=["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];

function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
var nhour=d.getHours(),nmin=d.getMinutes();
if(nmin<=9) nmin="0"+nmin

var greeting="";
if(nhour>=6 && nhour<=11){greeting="C'est MATIN";}
else if(nhour>=12 && nhour<=19){greeting="C'est APRESMIDI";}
else if(nhour>=20){greeting="C'est NUIT";}

var clocktext=''+tday[nday]+', '+tmonth[nmonth]+' '+ndate+', '+nyear+'<br><b>'+nhour+':'+nmin+'</b><br>'+greeting+'';
document.getElementById('clockbox').innerHTML=clocktext;
}

GetClock();
setInterval(GetClock,1000);
</script>

September 10, 2021 - 6:37pm — HH

Do you have any idea how to get (always) 4 digit number clock. For example: 00:15 or 09:25 that would be replacing for 0:15 or 9:25 (current available clock option) - This could be very useful to reserve center position at website even in a morning as well in a afternoon. At this moment changes from a 3 (three digit clock number) to a 4 (four digit clock) number can not be controlled by source code.

September 13, 2021 - 12:14pm — ricocheting

Under the line that adds zeros to the minutes:
if(nmin<=9) nmin="0"+nmin;
you can add a line that adds zero to the hours. So the two lines will look like:

if(nmin<=9) nmin="0"+nmin;
if(nhour<=9) nhour="0"+nhour;