HTML Goodies: Script Tip: Week 88

By Joe Burns



     Now that we understand the offset and can actually pick out time zones, it's time to build the clock. That's done by the checkDateTime() function.

The Script's Effect

Here's the Code

Open Code in a New Window

     This is a rather large function, so let's take it in chunks. The author has been nice enough to set apart each section and explain what it's for. We'll start up top and set the variables to juggle for the rest of the script:

function checkDateTime () {


var today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var date = today.getDate();
var day = today.getDay();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();

     The variable "adjust" is given the value of zero. Keep that in your brain. It'll come again at the very end of the tip.

     Just like the previous script, this one starts by setting up the JavaScript method "Date()" and assigning the variable name "today". Now we set about plucking out just the elements we want from "Date()".

     The script uses the "getFullYear()" method to return a four digit year. It's a good idea. The year is not manipulated in any way; it's just a display, so that will do just fine. The variable "year" is assigned the value.

     The month has a "one" added to it because the numeric month returns start at zero. By adding one, January's return is now one rather than zero. The variable "month" is assigned the value.

     The methods getDate() (day of the month), getDay() (day of the week), getHours(), getMinutes(), and getSeconds() all are assigned values equal to what they return: "date", "day", "hour", "minute", and "second".

     Those are the players, now let's begin playing with them.

Daylightsavings Time

     If it's the last Saturday in the month of October, it has to be daylightsavings time. "Spring forward, Fall back". We need to fall back.

var lastSat
while (lastSat<32){

if (lastSat>31) lastSat+=-7

     The variable "lastSat" is created. Next, it's given the value of "date" (day of the month) minus "day" plus one. For example, today is the 3rd and it's a Monday. That would create 3 minus (1+1) or one.

     However, if it is the 31st of October 2000, that's a Tuesday. That would create 31 minus (2+1) or 28.

     Now we start a while loop. While (meaning as long as) "lastSat" is less than 32, "lastSat" is equal to its present amount plus seven. That's what the (+=) means. In the case of 10/31/2000, that's the case and "lastSat" is now equal to 35.

     That number is acted upon yet again. If "LastSat" is greater than 31, which it is, then minus seven is added to it. That takes it back down to 28.

     Got it? It doesn't mean much now, but in a minute, we'll use the number.

Daylight Time

     We now need to grab the first Saturday in April. The code is very similar to what we just did except for a couple of plus and minus sign changes:

var firstSat firstSat=date-(day+1) while (firstSat>0){ firstSat+=-7 } if (firstSat<1) firstSat+=7

     The variable "firstSat" is created. Its value is equal to date (day of the month) minus the day of the week minus one. Sound familiar?

     A while loop rolls asking if "firstSat" is greater than zero. If so, "firstSat" has seven taken away.

     If the while loop is not true, then "firstSat" must be less than one. If so, "firstSat" has seven added to it.

Want more information about Javascript clocks?
Search the Web.

     Let's try that out. The first Saturday in April is on the 1st and it's a Saturday. That means the date (1) minus the day (6) plus one. One minus seven = negative 6. That isn't greater than zero, so "firstSat" is given the value of one. The second if statement gave it the value.

     Again, these numbers don't mean much right now, but they will when we roll through the next blip of code when we adjust for daylight savings time.

if ((((month==4)
&& (date>=firstSat)) || month>4) && (month<11 || ((month==10) && day<=lastSat))){adjust+=60}

     It's a little convoluted because of the display so you may want to open the script in a new window to follow it (It'll jump right to it).

     Right up front, remember that (&&) means "and", (||) means "or". Let's read it.

     If the month is equal to four (April) and "date" is greater than or equal to the value of "firstSat",
if the month is greater than 4 (in case the month is ten. That keeps it moving across the sentence) and "month" is less than eleven,
if month equals ten and the day is less than or equal to "lastSat",
"adjust" is set to itself plus 60.

     Remember "adjust"? It was set to zero. Now it'll be set to 60, one hour. Spring forward.

Next Week: Create the Clock

     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

  • 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