SQL PHP HTML ASP JavaScript articles and free scripts to download
JavaScript Tutorials
Popular Tutorials
Drop down list
Timer function
JavaScript Tutorials
String
Array
Date & Time
Form Validation
Event Handling
Math Functions
JavaScript Forum
Subscribe
Submit your email address and receive article and product notifications. Your email is safe with us.

 
 

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.

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>
Further readings
Countdown script displaying days , hours , minutes and seconds left from an event
Displaying changing Clock showing date and time in a web page
Timer function to set time for reminder alert
Timer Resetting the timer function
Displaying current date and time alert
Displaying Current Month using getMonth() function
Displaying present Year using getFullYear()
Showing Current Date using getDate() function
Displaying Current Day using getDay() function
 
Subscribe
Submit your email address and receive article and product notifications. Your email is safe with us.

Scripts
PHP
JavaScript