How to Insert a Clock on a Web Page
Website authors occasionally need to display the current time on their Web pages. Inserting a clock on a Web page is most simply accomplished by using a JavaScript program that checks the time on the user's computer and then prints this information to the page. Implementing the clock requires a small amount of technical knowledge, namely the ability to interpret the tags and general structure of an HTML document.
Other People Are Reading
Instructions
-
-
1
Open your Web page in a text editing program. HTML pages can be opened and edited using text editing programs like Microsoft's Notepad and WordPad. This example employs Notepad. Open the program by clicking the Windows Start button and then selecting "Programs" > "Accessories" > "Notepad." Select "File" from the menu at the top of the screen, and then click "Open." Text editors open .txt-formatted files by default, but they can easily read any plain-text file, including HTML pages. Display these files by finding the drop-down menu containing "Text Documents (*.txt)." Click it, and then choose "All Files." Find your existing Web page and open it.
-
2
Add the JavaScript program to your Web page. Locate the tag labeled </head> near the top of your Web-page code. Insert a blank line directly above this tag, and then copy the following code and paste it on the blank line:
<script type="text/javascript">
<!--function clock ( )
{
var time = new Date ( );
var hours = time.getHours ( );
var minutes = time.getMinutes ( );
var seconds = time.getSeconds ( );
minutes = ( minutes < 10 ? "0" : "" ) + minutes;
seconds = ( seconds < 10 ? "0" : "" ) + seconds;
var timeOfDay = ( hours < 12 ) ? "a.m." : "p.m.";
hours = ( hours > 12 ) ? hours - 12 : hours;
hours = ( hours == 0 ) ? 12 : hours;
var timeString = hours + ":" + minutes + ":" + seconds + " " + timeOfDay;
document.getElementById("clock").firstChild.nodeValue = timeString;
}// -->
</script> -
-
3
Update the body tag. Locate the tag labeled <body> in your code. Replace the tag with the following:
<body onload="clock(); setInterval('clock()', 1000 )">
-
4
Add a tag to display the clock on your Web page. Locate the line in your code where you want the clock to appear. Add the following tag on this line:
<span id="clock"> </span>
-
5
Save and preview your page. Click "File" on the menu near the top of your screen, and then select "Save." Open the Web page you just edited in your Web browser. A clock that updates every second now appears at the location you selected in the preceding step.
-
1
