We continue our discussion of the Date object in this lesson and learn how to make clocks. We will also learn a different way of doing conditional expressions and see how to do a little Date arithmetic.
Here's the script that we came up with to display time in problem
assignment number 4 in our last lesson.
The problem with using this script for the basis of a clock is that
numbers less than 10 for the minutes and seconds are not displayed with a
'0' in front of them. This can be solved by using the if statement as
I also put a blank space in front of the hour when it is below 10. I think this works better for a clock. Now all that is left to do is to put this script in a function that displays the results in a text box of a form. We use the setTimeout() function that we learned about in Lesson 7 to call the function every second to display time. Remember that the second parameter of the function determines the amount of time in milliseconds that goes by before the function specified in the first parameter is called. So, we want to use a value of 1000 for the this parameter.
Here is our completed clock() function that is put between the
<SCRIPT> tags in the HEAD section.
Here is the HTML code for the form that is used in the BODY section of
the document to display the results from our function.
I like to use a fixed width font for clocks when displayed in a form.
This seems to make the clock look better in a Netscape browser but has
little effect in Internet Explorer. The final bit of code needed to make
this work is to put
Here is the clock that we get when we set up our document as described above.
This clock displays in the 24 hour format. If you want to make a 12 hour clock then you will need to add a couple of more if statements. One is needed to display "am" or "pm" depending on the time of day and one to change the hour variable so that it only displays the numbers 1 through 12. Also the width of the text box on the form will need to be adjusted. Seems that this project would be a good homework assignment.
There is a different way of writing an if then else statement if you
want to assign one of two values to a variable. You will often see this
technique used in lieu of the way we wrote our if statements above. Lets
look at how our clock function would look if we used the conditional
This format is more compact but it really doesn't run any faster. So it is just a different way of doing the same thing.
The syntax for the condition expression is
variable = (condition) ? val1 : val2
The way this works is that if the condition is true then the variable is set to val1 but if the condition is false then the variable is set to val2. For example in our modified clock script, if min < 10 then the variable min is set to "0" + min else min is set to "" + min.
You will also see other variations of these two methods of doing the clock script. Use whichever one you feel the most comfortable with.
Here is the function that I used in Lesson 1 to greet you. Take a look
at it now and I bet it will look pretty simple. All the function does is
get today's date, determine the hour and then use a couple of if
statements to determine the proper greeting. The greeting is returned by
the function to be used in a document.write() method.
up some variables that build on each other to make it easier to do Date
Arithmetic. Here is the variable setup that he recommends:
Once this is done you can calculate a future date based on today's date
using these variables. For example, here is how you would find the date 5
weeks from now.
Here's another way that you can determine a future date. Suppose that
your birthday was on February 5 of this year and you would like to know
what day it will be on next year. Here's how you can do this.
Yes, you are right, I could have just set the date to 2/5/2000 to start with and then determined the day of the week. There will be times when you want to do it the way I did however. For instance, you might have already established a date object and then just want to add a year to it. Don't forget that our results will be a number that you must convert to an actual day of the week using the technique we learned in this week's first lesson.
Using a little date arithmetic, we can convert our 24 hour clock into a one that shows Greenwich Mean Time.
Here's the function that I used for the GMT clock. There are only two
new lines needed to make the clock display Greenwich Mean Time. First we
calculate the number of milliseconds that represents the current GMT time.
We do this by using the getTime() method to determine the milliseconds for
our local time. We then get our offset from GMT by using the
getTimezoneOffset() method. Since this value is in seconds we have to
multiply it by 60000 to convert it to milliseconds and then add the two
numbers together to get the current GMT time in milliseconds. We then use
this value to create a new object for our GMT and assign it to the
variable gmtTime. That's all there is to it. I did change some of the
variable names and the name of the form object to make this clock work on
the same page as our 24 hour clock.
Note: See Appendix 4 to learn how to make your date scripts Y2K compatible.
[ Top of Page | Contents ]