<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var x = new Date()
document.getElementById('ct').innerHTML = x;
display_c();
}
</script>
</head>
<body onload=display_ct();>
<span id='ct' ></span>
</body>
</html>
function display_ct() {
var x = new Date()
var x1=x.toUTCString();// changing the display to UTC string
document.getElementById('ct').innerHTML = x1;
tt=display_c();
}
The output is here
function display_ct() {
var x = new Date()
var x1=x.getMonth() + 1+ "/" + x.getDate() + "/" + x.getFullYear();
x1 = x1 + " - " + x.getHours( )+ ":" + x.getMinutes() + ":" + x.getSeconds();
document.getElementById('ct').innerHTML = x1;
display_c();
}
Note that we have only changed the display_ct() function part , other code remains same. Here is the output
<script>
function display_ct5() {
var x = new Date()
var ampm = x.getHours( ) >= 12 ? ' PM' : ' AM';
var x1=x.getMonth() + 1+ "/" + x.getDate() + "/" + x.getFullYear();
x1 = x1 + " - " + x.getHours( )+ ":" + x.getMinutes() + ":" + x.getSeconds() + ":" + ampm;
document.getElementById('ct5').innerHTML = x1;
display_c5();
}
function display_c5(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct5()',refresh)
}
display_c5()
</script>
<span id='ct5' style="background-color: #FFFF00"></span>
<script>function display_ct6() {
var x = new Date()
var ampm = x.getHours( ) >= 12 ? ' PM' : ' AM';
hours = x.getHours( ) % 12;
hours = hours ? hours : 12;
var x1=x.getMonth() + 1+ "/" + x.getDate() + "/" + x.getFullYear();
x1 = x1 + " - " + hours + ":" + x.getMinutes() + ":" + x.getSeconds() + ":" + ampm;
document.getElementById('ct6').innerHTML = x1;
display_c6();
}
function display_c6(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct6()',refresh)
}
display_c6()
</script>
<span id='ct6' style="background-color: #FFFF00"></span>
Add one leading zero to all single digit in month , date, hour , minute and seconds. <script>function display_ct7() {
var x = new Date()
var ampm = x.getHours( ) >= 12 ? ' PM' : ' AM';
hours = x.getHours( ) % 12;
hours = hours ? hours : 12;
hours=hours.toString().length==1? 0+hours.toString() : hours;
var minutes=x.getMinutes().toString()
minutes=minutes.length==1 ? 0+minutes : minutes;
var seconds=x.getSeconds().toString()
seconds=seconds.length==1 ? 0+seconds : seconds;
var month=(x.getMonth() +1).toString();
month=month.length==1 ? 0+month : month;
var dt=x.getDate().toString();
dt=dt.length==1 ? 0+dt : dt;
var x1=month + "/" + dt + "/" + x.getFullYear();
x1 = x1 + " - " + hours + ":" + minutes + ":" + seconds + " " + ampm;
document.getElementById('ct7').innerHTML = x1;
display_c7();
}
function display_c7(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct7()',refresh)
}
display_c7()
</script>
<span id='ct7' style="background-color: #FFFF00"></span>
<input type=text id='t1' size='70'>
For displaying add this line inside the function display_ct()
document.getElementById('t1').value = x;
document.getElementById('ct3').style.fontSize='30px';
document.getElementById('ct3').style.color='#0030c0';
document.getElementById('ct3').innerHTML = x2;
// date part ///
var month=x.getMonth()+1;
var day=x.getDate();
var year=x.getFullYear();
if (month <10 ){month='0' + month;}
if (day <10 ){day='0' + day;}
var x3= month+'-'+day+'-'+year;
// time part //
var hour=x.getHours();
var minute=x.getMinutes();
var second=x.getSeconds();
if(hour <10 ){hour='0'+hour;}
if(minute <10 ) {minute='0' + minute; }
if(second<10){second='0' + second;}
var x3 = x3 + ' ' + hour+':'+minute+':'+second
<span id='ct4' style="background-color:#FFFF00"></span>
Ken | 18-02-2013 |
Hi! I would like to ask if how can I display the time in textbox? Thanks. |
Drew | 27-02-2013 |
Hi Sir, How can i display it in this format Date is February 27, 2013 Time is 05:36:02 PM Thanks, Drew |
smo | 27-02-2013 |
The only difficulty is to display the Month part. You can read this tutorial on displaying full month in JavaScript. Rest of the things can be managed. Let us know the result. |
smo | 27-02-2013 |
Displaying in a textbox is added |
Jeremie | 12-12-2013 |
Great tutorial. Do you know if it would be possible to display the servers time instead of the clients? |
smo | 14-12-2013 |
You need to use and server side script like PHP, ASP etc to display server time. Here is an example of displaying server time using PHP. |
Madhu | 07-02-2014 |
wow..it is really helpful. But i want same thing in date picker control. Is it possible ? |
ramesh | 14-04-2014 |
i want to change the text font size and font name....How? |
smo | 14-04-2014 |
By using style property we can manage font size and font color. Demo added. |
nagaraj | 15-05-2014 |
it is help full, |
Fahad | 19-05-2014 |
How to change time-zone in example UTC string? |
www.ibrahimaziz.biz | 23-07-2014 |
Works like charm !, thank you so much, greetings from Indonesia :D. |
qwho | 29-08-2014 |
wow! my year displaying as 114 instead of 2014 had been bugging me a long time, went looking today and found this page, thank you! |
Neha | 24-09-2014 |
Wow great work.. ! Happy to find this blog.. Thanks sir.. |
hack | 04-10-2014 |
Fantastic tutorial.........thank you!!! |
susan | 17-10-2014 |
I want to start with server time, which works for the rendering time of page. But then stops. How to increment? I used var x = new Date(<?php echo time(); ?>*1000) Any idea? |
smo | 18-10-2014 |
To get updated server time , you need to refresh the page at a interval. Another way is to use Ajax which gets the time from the server without refreshing the page. |
susan | 18-10-2014 |
'var x = new Date( < ?php echo time( ); ? > *1000);' Unfortunately the PHP gets stripped out of my code... This code initiates 'new Date()' with server date. I expect your code to increment as it does, when 'new Date()' is initiated with local time. Why that does not work? |
kedar | 20-10-2014 |
i saw your stop watch script how i can run the clock without clicking button, and i want to show the same time even after refresh the page. How i can do. |
smo | 20-10-2014 |
To get the server time and increment it we have to use Ajax. It connects to server in every one second and gets the data. You can read the tutorial and download the script here. |
mekala | 22-12-2014 |
Really,this date and time function useful for my coding...Thank you |
amit verma | 13-01-2015 |
hi there i need to show live clock of to different time zones how can i do so |
Heslon | 13-01-2015 |
Thanks so much, I have enjoyed learning through this tutorials. |
Christina | 17-02-2015 |
You should consider altering the code for any time that has a minute or second that is less than 10. Your way shows the time as being "9:2:3" instead of "9:02:03" |
hazel | 30-04-2015 |
it help me alot.. :D |
Pandian | 04-06-2015 |
It works and very useful.. Thank you.. |
ram | 23-06-2015 |
nice one tutorials. |
krishan | 05-07-2015 |
Thank you so much......... |
Imran Ashraf | 08-10-2015 |
Your code is working correctly. Thanks |
Robert Wieneke | 23-10-2015 |
can you display CST and UTC at the same time? I tried pasting both scripts on the same page but only one will run. |
Mazharul Hoque | 29-05-2016 |
Hi Sir, How can i display it in this format Date is May 27, 2016 Time is 10:41:02 PM Thanks, Mazharul |
Aman Bhardwaj | 31-08-2016 |
Hi, I want to check how can we add time for Different countries like, IST EST , South Africa or Dubai in a continuous clock program. |
Aman | 31-08-2016 |
can you display CST and UTC at the same time? I tried pasting both scripts on the same page but only one will run. |
smo1234 | 01-09-2016 |
You can display both.
See that you have one span tag with id ct ,
create one more span tag with id=ct1 , then try to create x1 // changing the display to UTC string var x1=x.toUTCString(); document.getElementById('ct1').innerHTML = x1; Now you can display both |
smo1234 | 02-09-2016 |
One more page added showing time in different cities of different time zone.
For comparison , local time and GMT time is also shown. Let us know how they are working. More cities will be added to this. Link is at end of the article. |
Peter | 26-01-2017 |
Can I also Display a Real time changing Clock of an internal time Server in a HTML Website? |
Gary Y. | 24-06-2018 |
What is the declared variable "strcount" for?
And why have the return value of "tt" for the "display_c()" function call? Great tutorial! |
smo1234 | 29-06-2018 |
Both are not required so removed . Thanks |
11-01-2020 | |
This is not useful because if the user changes his or her time setting it will show wrong GMT time. Please provide a solution that can not be tricked by web user. Thanks for your work anyways. |
05-03-2020 | |
For this the time setting of Server side is to be used, so the user can't change the value. The present script depends on user PC time setting so it will read the local time only. There is a link to Server side Clock. You can compare the server time and the user time and then allow the time settings. |
22-01-2021 | |
thank you for this tutorial....how can remove timezone and just show time only |