HTML Goodies: Script Tip: Week 87

By Joe Burns



     You want a clock? We got a clock!!

     I have loved this script since it first arrived at the old JavaGoodies site. It's long, involved, has some code I don't really think is required, but it gets the job done well.

     At the moment I have the clock set to post Central Standard Time. I live new New Orleans so that's the time I have posted. You have to make a point of saying which time zone displays first because this script doesn't just post what's displaying in the user's browser. Everything is posted off of Greenwich Mean Time (located near London in the UK).

     The script is set up to present ten time zones, the one that first displays and then the nine denoted by the buttons, but after you see how the script works, you can set it to all 24 if you'd like. It's not all that tough.

     Stay focused; this is a long one and it tends to jump around a bit. You may want to open the script in a new window when it starts to get a little convoluted.

     That said, yonder we go...

The Script's Effect

Here's the Code

Open Code in a New Window

     We'll begin, as we always do when a script contains HTML, at the bottom. The HTML portion of the script is large and way too wide to display correctly here, so click here to open it in a second window

     As you can see, the author has made a point of combining form elements inside of table cells. I don't suggest you ever do that because Netscape Navigator can sometimes be a little picky about the two working together. However, I've tried this script in four different browsers and no errors have come up yet, so I can't complain too loudly.

     The HTML portion begins with the BODY flag which triggers the function checkDateTime() when the page loads. That function will fill the first text box, named "text". Each button click past that will fill the time into this text box.

     The second text box, named "locationx" is filled first by a straight hierarchy statement when the page loads and each time a new button is clicked. It's a simple text display.

     The buttons are all the same, here the first button's code:

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

     It's a basic button named "reset" (they're all named "reset"). The value changes from button to button depending on what time zone it's to represent.

     Each button contains an onClick that triggers a function that will change the time display to the correct time zone.

     That all seems pretty straightforward, right? Good. Let's shoot right to the top of the script:

var adjust=0
var zone=" New Orleans"
var PST=480
var EST=300
var TK=-540
var HW=600
var LD=0
var MX=360
var HK=-480
var FJ=-720
var ND=-330

     Like I said right at the beginning of this tutorial, the time in this script is based upon Greenwish Mean Time, not on what's in the user's browser. In order to deal with multiple time zones, you need a starting point. In this case, Greenwhich Mean Time is equal to zero. Everything is either added or subtracted from there.

     This portion starts off with the variable "adjust" being given the value of zero.

     The variable "zone" represents the name of a city in the time zone. I set this script to first display with New Orleans. You can change it to display whatever you want.

     The variable "gmtOffset" is given the first offset value. New Orleans is in the U.S. Central Time Zone. That time zone is six hours behind Greenwich Mean Time. Six hours is equal to 360 minutes. Notice the minutes are positive because they need to be added in order to reach Greenwich Mean Time.

     If you look down the row you'll see that each new variable carries the value of minute offset from Greenwich Mean Time, positive if behind, negative is ahead. The math will bear out the positive and negative later in the script.

     Notice London is set to zero. That's where you'll find Greenwich.

Want more information about Javascript clocks?
Search the Web.

     If you wish to set this script to first display the time where you live, you need to alter the variable "gmtOffset" to represent your relationship to Greenwich. I found mine pretty easily. Eastern Time is already there. I just added sixty minutes because I knew I was moving farther away from Greenwhich.

     My suggestion is to just add multiples of sixty until you hit it. After a try or two, you'll get it pretty quickly.

     Next week, we'll jump down past all the little functions to start tearing apart the function checkDateTime().

     I told you we'd jump around.

Next Week: checkDateTime()

     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:

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