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.

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)

Hi, i need to put date changing only once a week and not every day, how to do that? For example, each fridays it updates autoamtically.

This should do what you want. Change day_of_week to the value you need. Where 0=sunday up to 6=saturday

Your code might be a bit different depending on your display options. But the lines in bold are the lines I added:
<script type="text/javascript"> tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December"); var day_of_week = 5;//0=sunday, 6=saturday function GetClock(){ var d=new Date(); if(d.getDay()>day_of_week)day_of_week+=7; d.setDate(d.getDate()+(day_of_week-d.getDay()));//sets day of month var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(); if(nyear<1000) nyear+=1900; document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+""; } window.onload=function(){ GetClock(); setInterval(GetClock,1000); } </script> <div id="clockbox"></div>

I'm not sure what you're asking. You can change the line that starts with
document.getElementById('clockbox').innerHTML=to start with this instead
capture_time= that assigns the clock string to the capture_time variable if that's what you mean.

I need to capture the time/date of a form and post that to a server under the "capture_time" var.
I was going to try
input type="hidden" name="CAPTURE_TIME" id="clockbox"

To confirm what are suggesting.
is to replace
document.getElementById('clockbox').innerHTML=
with
capture_time=

Your help is greatly appreciated.

If you need the date/time the form is submitted, ideally you should get that from the (PHP?) script you're posting to, not from the form itself.

However, your original idea will also work. Replace
document.getElementById('clockbox').innerHTML=with
document.getElementById('clockbox').value=
and replace
<div id="clockbox"></div>with
<input type="hidden" name="capture_time" id="clockbox" />

What that does: instead of changing the HTML of the "clockbox" div, it'll change the value of the "clockbox" input field. So when the form is submitted, the "capture_time" field will contain the visitor's current date/time.

I tried your suggestion and it failed for an invalid value for the "time_capture" var. It needs to be in the format MM/dd/yyyy HH:mm.
Any other feedback as to what I might be doing wrong?

thanks

The code I provided will work. If you need the submitted form field to be called "time_capture" you will need to change it to that (you called it "capture_time" before). Neither name is necessary for the Javascript part though.
<input type="hidden" name="time_capture" id="clockbox" />