HTML Goodies: Script Tip: Week 90

By Joe Burns

 

Scripper...

     As if the numbers haven't been through enough, now, let's post them to the text box.


The Script's Effect


Here's the Code

Open Code in a New Window


     The placement part of the function looks like this:

var dateTime = hour;
dateTime = ((dateTime <10)? "0":"") + dateTime;
dateTime = " " + dateTime;
dateTime += ((minute < 10) ? ":0" : ":") + minute;
dateTime += ((second < 10) ? ":0" : ":") + second;
dateTime += " " + month + " " + date + ", " + year;
document.clock.face.value = dateTime;
document.clock.locationx.value = zone;
setTimeout("checkDateTime()",900);
}

     We start by setting a new variable, "dateTime," to the hour. Remember that we took a great deal of effort to get that number accurate to the hour in the time zone where it would display. We'll use it to begin figuring out the remainder of the display.

     Here's something new to the Script Tips, (?:) See that question mark and colon that pops in there a few times? That's JavaScript shorthand for an If/Else statement. The format is similar to the traditional If/Else. First there's a condition, then there are two items. If the condition is true, the first item is returned. If it is false, the second is returned.

     Look at the first line. If "dateTime" is less than 10, then something. Let's say it's 8PM. The return would be zero "0" because the condition is met. If it were ten, nothing would be returned because the condition was not met and the the second item is nothing, empty double quotes.

     We then combine that with date time. So if "dateTime" is eight, after this, it will be "08". If it's ten, it just remains "10". We have our hour.

     The same effect is done with the minutes and seconds, adding a zero if it's nine or below and leaving it be it it's ten or above. Notice each time that the minute is added to the hour, the second is added to the minute.

     The time is created by adding "month", "date," and "year" altogether and putting them into the text box denoted by: document.clock.face.value.

     The time zone is set way up at the top of the script once again. We'll jump there in a minute. That value is put in the the second text box denoted by: document.clock.locationx.value

     Finally, believe or not, the script is set to rest, and then run again every 9/10ths of a second.

Each Time Zone

     Give me one more moment and I'll wrap this script up. If you go back to the HTML portion of the script and look at the first button, you'll see that it triggers a function:

<input type=button name=reset value="Pacific" onClick="checkPST()"><

     The function checkPST() is way up at the top of the script. It looks like this.

function checkPST(){
clearTimeout(checkDateTime)
gmtOffset=eval(PST+adjust)
zone=" Pacific"
checkDateTime()
}

TechCrawler
Want more information about Javascript clocks?
Search the Web.

     You should notice that there is a little function that looks like this for each one of those buttons. When triggered, the function stops the setTimeout() and runs the "checkDateTime" again, passing new variables to it. The variable is "gmtOffset". It is equal to the PST value (offset minutes) which we set up above plus the adjust.

     Notice the new "zone" text that will display in the second text box.

     Finally, it runs that big checkDateTime() function and the new time displays.

     Wow. That was quite a script, huh?

     Next week, we'll cover one script only, and promise I'll kill it in one script tip. It's a Netscape Navigator 4.0 only script that creates a layer that follows your mouse around the screen. It's not of much use, but it's fun. We'll smile a little next week.

Next Week: Follow that Mouse!

     Do YOU have a Script Tip you'd like to share? How about suggesting a Script Tip to write about? I'd love to hear it. Write me at: jburns@htmlgoodies.com.


Learn to write your own JavaScripts with the HTML Goodies 30-Step Primer Series


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date