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.
October 29, 2020 - 3:02pm — MtheK
slight alteration of your code
Just an FYI: nice code. Because I don't use seconds, I changed the refresh interval
from 1 to 60sec for a bit better performance. Tho this means the clock can be off by
up to 60 seconds, I feel that it isn't that noticable. Comments? Thankx...
October 30, 2020 - 6:22pm — ricocheting
Answer: Updating less than once per second
Changing the setInterval() value to update at a slower rate is perfectly fine.
Any modern browser can handle JavaScript and rendering changes very efficiently though. Updating a text value once per second is almost nothing in terms of computing power.
If you want to play with it, pull up the developer console in your browser and go to the Performance tab. You can use that to break down how long each little part takes and what the browser spends that time doing.
November 8, 2020 - 10:00am — David Lightman
Absolute Position
Is there a way to integrate the clock into a responsive html web page using Bootstrap, perhaps with some sort of absolute positioning and scaling so the clock will stay in one location of the page and scale up or down in size based on the device screen size?
November 9, 2020 - 11:23am — ricocheting
Answer
You can use any of the bootstrap Components or Utilities like position on the clockbox:
<div id="clockbox"></div>
becomes
<div id="clockbox" class="position-fixed"></div>