JCL's Tutorial On JavaScript Time
: If you don't see the time and date after the whole page loads, you are not using a high enough browser. You need Netscape or Internet Explorer 2.0.2 or higher.
Creating JavaScript Time Scripts
Even though creating JavaScript time scripts may be much more time consuming than creating JavaScript prompts and alerts, time scripts tend to be fairly simple. Granted, the script may look impossible, but if you break it down, you'll see that what I say is true. To get the script, click here. Just copy and paste into your HTML document. After you have completed that task, read below for instructions and explanation. The explination is not as complete as the other tutorials because the script is way too long to break it down line by line in detailed explanation.
Breaking Down The Code
- <script language = "JavaScript"> - tells the computer that the JavaScript language is going to be used
- <!-- Begin hiding here -- : comment which hides the script from old browsers
- /* (the text in between) */ - C comments (computer skips over these lines) - If you want to use this script, you must keep these lines in.
- function start_clock()
{ - defines the function start_clock
- var now = new Date() - assigning the variable now to the day, date, month, year, and time (Note: The time comes in military time and the month and day come in numbers starting with 0 being January and Sunday. The year doesn't start with 19 either.)
- var something = now.getSomething2() - assigning the variable something (replace something with Hours, Month, etc.) to the defined function of Year, Date, etc. when you replace Something2 with Seconds, Day, etc. (the function gets the month, year, etc.)
- if, else, and else if statements - The if statements are executed if the condition in the parentheses are true, the else statements are executed if the condition in the if statement is not true, and the else if statements are only executed if the if statement is false and the condition within the parentheses of the else if statement is true.
- document.time_form.name.value = value2 - The document.time_form tells the computer that it should read off of the form, time_form. The name is the name of the form data item to be read off of, Value is the text that should appear in the box, and value2 is the variable the new value is equal to. When you put it all together, you assign value2 to appear in the form named time_form's input box named name.
- setTimeout("start_clock()", 1000); - tells the computer to do the function called startclock() every second
- } - ends the function, start_clock
- // -- End hiding here --> - ends the comment which hides the script from old browsers
- </script> - ends the JavaScript language
- <body bgcolor = "white" body onLoad = "start_clock()"> - activates the function start_clock() when the page has finished loading
- <form name = "time_form"> - creates a form named time_form
- <input name = "name" size = "n" value = "value> - creates an input box which is called name, has a size of n, and the word, value in its box
- </form> - ends the form data
Summarizing The Script
This script is one big function which loads when the whole page is loaded and repeats itself every second (before the page has loaded, the input boxes will have the text, Loading..., in them). First, the script gets the date and time and then translates the things that should be in words from numbers to words. It also changes military time to regular time and uses the time to figure out the part of day. It then puts all this data into form boxes. Because the function is done every second, the time, date, and part of day all get updated with it. The appearance is a clock ticking away every second and the date and part of day changing when necessary.
Instructions (3 simple steps)
1. Click on the link above.
2. Copy the text on that page and paste it on to your document source.
3. Move the boxes with the time, date and day_part to the place you want them by cutting and pasting the <form name = "time_form> and </form> (and all the information in between) and moving it to the desired part in your HTML source. If you wish to seperate them into 3 different forms, change the time_form in the document.time_form (at the end of the script), for the name of the input box, to the name of the new form you are placing it in. Also, make a seperate form name to match the name after the document. (and remember </form tag> at the end of each form) for the input box which you are moving to a different form.
JCL's HTML & JavaScript Tutorial
E-Mail Me