Thursday, January 17, 2013

JavaScript Auto-Refreshing Script


Take an example of clock. Here we will create a clock that refreshes in every 1 second to show the correct time.
Start with the basic HTML tags
<html>
     <head>
Now, in head section start the javascript section
           <script type = "text/javascript">
Create a function time() function that creates a variable today and assign it the value of current time.
Now, the value of variable is written in the element having id “timeDiv”
                function time(){
                var today = new Date();
                document.getElementById("timeDiv").innerHTML = today;
                }
Create another function update() that runs the time() function in every 1 second.
                function update(){
                time();
                setInterval("time()",1000);
                }
Close the javascript section.
           </script>
Give some title to the document.
           <title>Time Auto Refreshing</title>
Close the head section.
     </head>
Start the body section. It automatically runs the update() function when the page is loaded.
     <body onload="update();">
Create a div element with id “timeDiv” in which the variable “today” defined above will be stored.
           <div id="timeDiv" style="font-size:32px;"></div>
Close the body and html section.
     </body>
</html>
Save the file with .html extension (eg. test.html)