Real time changing Clock showing date and time

We can display a clock which will be showing the local time of the client computer by using JavaScript. Note that this time displayed is taken from user computer and not from the server.
JavaScript real time clock showing change in date and time in different formats

We have seen in our date object example how to display current date and time where the current date and time is displayed once. Here we will try to display changing clock or real time change in date and time by using setTimeout function. This setTimeout function we have used to trigger the time display function in a refresh rate of 1000 mill seconds ( 1 Sec ). This refresh rate can be changed to any other value. By changing the value to 5000 the clock will refresh and show the exact time once in every 5 seconds.

Here is the demo of this script and code is given below that.



Here is the code

<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>

Changing the display format

To change the display format we need to change the function part only where we can change the display part.
Let us start with using UTC string
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

Displaying in mm/dd/yy H:m:s format

Here is the code
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

Displaying AM or PM with clock

<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>

Displaying 12 hours format

<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>

To display clock inside a textbox

Create a textbox and give id to it
<input type=text id='t1' size='70'>
For displaying add this line inside the function display_ct()
document.getElementById('t1').value = x;

Changing font size and font color of display

document.getElementById('ct3').style.fontSize='30px';
document.getElementById('ct3').style.color='#0030c0';
document.getElementById('ct3').innerHTML = x2;

Adding 0 to single digit numbers

We can display 5 hours as 05 hours or 2 minutes as 02 minutes.
// 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>

Displaying Server time using Ajax

This script uses JavaScript to read client computer time and display the same. By using PHP or any other server side script we can display server time. But here we can get once the time that is the time of the page rendered from server. To display updated or real time clock showing server time we have to send request to server periodically. To do this we can use Ajax to get current date and time from server and display in one second interval.

Toggling the display of clock by a button ( using Jquery)

Read how we can toggle the display of the clock by controlling from a button.

Draw Analog Clock on Canvas using Jquery or JavaScript.

Analog Clock using HTML Canvas


Date Reference Clock of cities in different time zones
Set Alarm Clock using time picker script Stopwatch script using setInterval()
Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    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

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer