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.

Related Tutorial
Count Down clock
Stopwatch
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 strcount
var x = new Date()
document.getElementById('ct').innerHTML = x;
tt=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 strcount
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 strcount
var x = new Date()
var x1=x.getMonth() + "/" + x.getDate() + "/" + x.getYear();
x1 = x1 + " - " + x.getHours( )+ ":" + x.getMinutes() + ":" + x.getSeconds();
document.getElementById('ct').innerHTML = x1;

tt=display_c();
}

Note that we have only changed the display_ct() function part , other code remains same. Here is the output

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;

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.

Server side Clock using Ajax and PHP

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.

Set Alarm Clock using time picker script

Stopwatch script using setInterval()

Number of User Comments : 25


Google+

More on JavaScript Date & Time
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?
Wilf

28-05-2014

Using getFullYear() instead getYear() means 2014 is displayed instead of 114, which works for me. Thank You!
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(*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( < ? p h p e c h o t i m e ( ) ; ? > *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.
hazel

30-04-2015

it help me alot.. :D

Post Comment This is for short comments only. Use the forum for more discussions.







OPINION POLL

What is the most important factor of a web site
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2015 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer