|
|
Real time changing Clock showing date and timeWe 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.
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'>
For displaying add this line inside the function display_ct()
document.getElementById('t1').value = x;
Read how we can toggle the display of the clock by controlling from a button.
Found anything wrong or wants to improve the code by adding more features? Post your short comment here or use the Forum
| |
| | | 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 |
|
|
|
|
|
|
