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


Source Code
loading clock preview...

Comments

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

You can add style tags to the div tag in the last line:
<div id="clockbox" style="text-align: center;"></div>

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

d = new Date();
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: d = new Date();with:
d = new Date();
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">
offset = Math.round(new Date().getTime() / 1000);

and replace
d = new Date();with:
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");

Small question, how do you make the date text bold? Sorry I am a noob to javascript!

you can edit the last line of your generated code and add a style="" property like:
<div id="clockbox" style="font-weight:bold;"></div>

Hey love the code, it's perfect but is there a way to use more than one on the same page? I want to show LA & NYC time, but the codes are interfering with each other? I read here that someone had a similar problem but I do not understand the solution, thank you.

This script really wasn't setup too support multiple copies on the same page. If you paste the code for your two countdowns, I'll go ahead and change one for you so they'll both work.

How can i use this function to display date and time in multiple pages through external js ? Your help will be appreciated...I am kind of newbie on the subject...Thanks

Yes, you can. Put the javascript in the external file and then put <div id="clockbox"></div> on each page where you want the clock to appear.

Depending on which options you have, there's a line with:
document.getElementById('clockbox').innerHTML= like
document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+""; where you can add your additional text like "Current Time:"
document.getElementById('clockbox').innerHTML="Current Time: "+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";

How would I go about adding a line break at the end of the year and also the timezone after the A.M, so it would read

Fri, 11 Jul 2014
11:38 a.m. NZST

The formatting you can update by changing the document.getElementById('clockbox').innerHTML line like:
document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+ndate+" "+tmonth[nmonth]+" "+nyear+"<br/>"+nhour+":"+nmin+ap+"";
The timezone text isn't supported by JavaScript. You can get how many hours you're off from UTC/GMT, but not what your zone is called.

Thank you it works great. Unfortunately when using the code it causes a gap at the bottom of the navbar on the left, you can see this here: http://moi-design.myshopify.com/
The grey navbar background should extend to the bottom of the page behind the "Motion Sickness Studio" link. I've tried applying various CSS but nothign seems to solve the problem. If I remove the javascript code the navbar looks correct again.

Any help would be much appreciated.

It's hard to say what's causing it by simply looking at the code, but probably something to do with the fact the box "expands" once it starts ticking. Try replacing the clockbox with:
<div id="clockbox">&nbsp;<br/>&nbsp;</div>If that doesn't work, try something besides a div:
<p id="clockbox">&nbsp;<br/>&nbsp;</p> If that still doesn't work, you might try forcing a height on the box:
<div id="clockbox" style="height:46px;"></div>

Sidenote: I'm not sure what language your site is using but you could pull the date/time directly from the server using PHP or whatever language the cart uses. Most server-side languages have access to the Timezone identifier wording you originally asked for (although the time wouldn't updated unless the page reloaded).

Thanks so much, not sure how but your first suggestion <div id="clockbox">&nbsp;<br/>&nbsp;</div> has worked! :)