Run a Function Continuously in Javascript Htm
JavaScript real time clock showing change in date and time in different formats Here is the demo of this script and code is given below that. Here is the code Draw Analog Clock on Canvas using Jquery or JavaScript.
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.
<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
The output is here 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(); }
Displaying in mm/dd/yy H:m:s format
Here is the code
Note that we have only changed the display_ct() function part , other code remains same. Here is the output 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(); }
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
Add one leading zero to all single digit in month , date, hour , minute and seconds. <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>
<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
For displaying add this line inside the function display_ct() <input type=text id='t1' size='70'>
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. 
Date Reference Clock of cities in different time zones
Set Alarm Clock using time picker script Stopwatch script using setInterval()
This article is written by plus2net.com team.
Source: https://www.plus2net.com/javascript_tutorial/clock.php
0 Response to "Run a Function Continuously in Javascript Htm"
Post a Comment