Site Development
Downloads
Help!!
Home
Time In JavaScriptTime is included as part of the Date() object introduced in the previous lesson. It has its own set of "get" methods that can be used and displayed similar to the getDay() and getYear() methods of the Date() object. The time is made up of hours, minutes, and seconds. There is also a getTime() object that references the number of milliseconds that have passed since midnight (00:00:00), 1 January 1970. This seems ridiculously arbitrary, but it comes in handy when comparing the time of two Date() objects. We'll be dealing with this in a later tutorial. What we'll be dealing with now is how to get the hours, minutes, and seconds from the viewer's machine and display them on your page. Here's an example. To begin, we need to make a Date() object like we did when we wanted to "get" the day, year, etc. That's done by making up a name and assigning it the value "new Date()":
<script language="JavaScript"> I've used the name "now" to create the "new Date()" object. You can use any name you'd like. Now we have an object we can use to "get" the hours, minutes, and seconds from the viewer's machine. Time "Gets"Below is a list of the code needed to access hours, minutes, and seconds. I'll bet anything you can figure out which is which. You can use any name you like to be assigned these values:
hour = now.getHours(); Remember to always start a "get" with the Date() object you've made. That's "now" in this case. The "getHours()" returns a number between 0 and 23 representing midnight to 11:00 PM respectively. Military time (24-hour clock) is used to represent the hour. We'll cover using AM and PM in a minute. The number returned by "getMinutes()" is a number between 0 and 59. The same is true of "getSeconds()". Adjusting For Military TimeYou may prefer to use AM and PM instead of the 24-hour clock, or military time, returned by "getHours()". This isn't too much of a problem. Begin by making a variable to hold the string value of either "AM" or "PM". This string will be used in the time display later.
<script language="JavaScript"> The above will declare and initialize a variable called "tag" to a null (empty) string -- a set of double quotes with nothing between them. We'll be assigning "tag" a value of "AM" or "PM" later on. Military time and AM/PM time use the same numbers from midnight (0) until noon (12). After 12:00 noon, military time continues counting at 13. This makes military afternoon and evening times 12 hours more than AM/PM. We can use an IF statement to pick up on this by testing to see if the hour is greater than 12:
<script language="JavaScript"> Once the "afternoon" condition is detected, we can subtract 12 from the military hours and assign "tag" a value of "PM".
<script language="JavaScript"> The "hour = hour - 12" will cause afternoon and evening times to revert to AM/PM formatting. Military 15 will be converted to AM/PM's 3. The "tag" variable will be assigned a "PM" value. The morning hours do not need to be converted. We only need to set "tag's" value to "AM". We'll do this with an ELSE statement:
<script language="JavaScript"> Now when we display the time, we can use "hour" for the number and "tag" for either "AM" or "PM". Displaying The TimeNow that we can "get" all of the time components we need, and adjust for military time if desired, we're ready to display the time on a page. In the sample, I used the following "document.write()":
<body> Remember that the "gets" don't come with colons or spaces. See how I added these above? Also note how the variable "tag" is used. Separating the "AM" and "PM" strings from the number representing hours is very convenient. Summary & Exercises
You'll notice that single digit values do not have a zero preceding them. A time with a seconds value of 2 would be xx:xx:2, not xx:xx:02. The same is true of minutes and hours. You may want to add this zero. See if you can use IF/ELSE statements to append a zero. Hint: You need to append a "0" to a string, not add zero mathematically.
|
You can access the viewer's machine's time components by making a Date() object and then using "getHours()", "getMinutes()", and "getSeconds()" methods.
To Next Advanced JavaScript Lesson
Back To Advanced JavaScript Index