Jump to navigation
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
- Select how you want your clock/calendar to look
- Generate the HTML and JavaScript code for your clock (button at bottom)
- Preview your clock at the bottom above the code
- 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>
Comments
May 4, 2012 - 9:34pm — Anonymous
Point Code in Center
Thank you very much for this code. Only one question. How to put this code in center.
May 5, 2012 - 11:32pm — ricocheting
Answer: Center align the clock
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
Timezone offset
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);
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
Timezone offset (using 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'); ?>);
List of Supported Timezones
March 25, 2015 - 8:02pm — ricocheting
Timezone offset (with +30 mins)
If your timezone is for say Bangalore, India (UTC/GMT +5:30) under the lines added for Timezone offset you can add an additional line like:
d.setMinutes(d.getMinutes()+30);
That will add an additional 30 minutes.
June 5, 2013 - 6:33am — ali
how get first time from server by php
How can I get the server time by using PHP?
I tested this code but it is not working. [snip]
June 5, 2013 - 12:23pm — ricocheting
Answer: Javascript displays server time (using PHP)
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
German translation
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 - 11:42am — Anonymous
How do you add more than one
How do you add more than one of these clocks on the same web page?
January 6, 2015 - 1:58pm — ricocheting
Answer: Displaying the clock in multiple loations on a page
document.getElementById('clockbox').innerHTML=clocktext;
and change it to 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
Adding st, nd, rd, th
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
Answer: Adding the number suffix to dates
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";}
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
Tenths and Hundredths
Can clock code be created that will display 1/10 & 1/100th seconds:
23:59:59.99
June 2, 2016 - 10:45am — ricocheting
Answer: Displaying milliseconds in clock
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);
November 8, 2017 - 10:40am — Tyler
Is there a way to add 0
Is there a way to add 0 before date and month?
November 8, 2017 - 9:43pm — ricocheting
Answer: Adding zero before day & month
You can do the same thing the minutes/seconds use:
if(nmonth<=9) nmonth="0"+nmonth;
if(ndate<=9) ndate="0"+ndate;
var clocktext=
January 31, 2018 - 1:01pm — Wolf
Display the UTC + __
Is their a way to display the UTC + _ at the end of the time?
February 1, 2018 - 1:07pm — ricocheting
Answer: Displaying Timezone offset
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 likevar 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 5, 2018 - 1:59pm — Walfrido
Diferent styling for time and date
Is there anyway I can have different styles, like font size, for the time and date?
August 6, 2018 - 10:57am — ricocheting
Answer: Advanced HTML Styling
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 6, 2018 - 6:34pm — Matt
Blinking colons
Any way to make the : blink?
August 7, 2018 - 11:47am — ricocheting
Answer: Blinking colons
var clocktext=
setInterval(GetClock,250);
October 14, 2018 - 4:36am — Jan Havlicek
Answer: Blinking colons
IMHO it's better to use the style 'visibility:hidden'; it's independent of background color.