LanguagesJavaScriptCreate the Clock

Create the Clock


OK, we’ve got it set now to the point where we know if the hour is offset. It’s either zero or 60 right now depending on the day of the year.

Now we need to start building the clock using the actual time.


The Script’s Effect

Here’s the Code


Let’s keep moving through the function:

yourOffset=(new Date()).getTimezoneOffset();
yourOffset = yourOffset+adjust
var half=eval(ourDifference%60);

We set a variable named “yourOffset,” which is given the value of the difference, in minutes, between the local time (the time in the browser) and Greenwich Mean Time. Again, the return is in minutes. If you remember, we’re offsetting every time zone in minutes.

The variable “yourOffset” is then given the value of itself plus the adjust. If you remember, we set a series of adjusts for each time zone right at the top of the script. So now we have the number of minutes between you and Greenwich, plus the adjust.

The variable “ourDifference” is the number returned (eval) from taking the gmtOffset (set first in the script, two Script Tips ago) and the number we just created by adding the adjust and the number of minutes between you and Greenwich.

The variable “half” returns the number (eval) left over by dividing “ourDifference” by 60. Remember that the remainder is what is returned. The (%) sign does that.

“ourDifference” is then given the value of itself divided by 60 rounded to the nearest number.

Finally, the variable “hour”, grabbed from the browser, is given the number returned (eval) from itself minus the “ourDifference” value.

That number is the new hour.

So, at this point, we’re done, right? Only the hour changes in the world, the minutes and seconds stay the same.

That’s true, but depending on the hour and minute, the day changes. It’s Monday here, but it may be Tuesday in London. That’s a concern. The author has done a great job of setting up a series of “if” statements to offset the day and date.

Let’s start with this:

var m = new Array
("mm","Jan.","Feb.","Mar.","Apr.","May","Jun.","Jul.","Aug.","Sept.","Oct.", "Nov.","Dec.");

var leap=eval(year%4); 	 

We never made a point of setting the month to text. This array will take care of that for us later on in the script. The author has chosen the three-letter version of the month. If you want the full month names, change that here.

We also have to worry about leap year. Yes, this author thought of everything. The variable “leap” is created by taking the year and dividing it by four and returning the remainder (eval).

Now all those “if” statements. Remember that not every “if” statement applies to every date. Each will come into play only once in a while. Some only once every four years.

if ((half==-30) || (half==30)) minute+=30;

If “half” (the remainder of “ourDifference” % 60) is equal to minus 30, or equal to 30, then add thirty to its value (+=). Get it to the hour.

if (minute>59) minute-=60, hour++;

If “minute” is greater than 59, take away 60 from its value and increase “hour” by one. This is an even swap.

if (minute<0) minute+=60, hour--;

If “minute” is less than 0, add 60 to its total and lose one from “hour”.

if (hour>23) hour-=24, date+=1;

If “hour” is greater than 23, take 24 from its total and increase the date by one. We just went up a day if need be.

if (((month==4) || (month==6) || (month==9) || (month==11)) && (date==31))

date=1, month+=1;	 

If “month” is equal to 4 or 6 or 9 or eleven and the date is equal to 31, “date” equals 1 and “month” is increased by one. Again, we’re going across the date, but now to a new month too.

if (((month==2) && (date>28)) && (leap!=0)) date=1, month+=1;

Let’s check for leap year. If “month” is equal to 2 (February) and the date is greater than 28, and leap equals zero (the four divided perfectly), set the date to one, and raise the month by one.

if ((month==2) && (date>29)) date=1, month+=1;

If the month equals 2 and the date is greater than 29, date equals one, and the month is increased by one.

if (hour<0) hour+=24, date-=1;

If “hour” is less than zero, add 24 hours (a day) and take one away from the date. This is going backwards in days.

if ((date==32) && (month==12)) month=m[1], date=1, year+=1

If “date” is 32 and “month” is 12, month is equal to January (that’s array number [1]), date is equal to one and the year is increased by one.

if (date==32) date=1, month+=1;

If “date” is equal to 32, date becomes one and month is kicked up by one.

if ((date<1) && (month==1)) month=m[12], date=31, year-=1

If “date” is less than one (Sunday) and “month” is equal to 1, the month is equal to December, “date” is 31 and the year loses one.

if (date<1) date=31, month-=1;

If “date” is less than one, then date is 31, and month loses one.

if (((month==4) || (month==6) || (month==9) || (month==11)) && (date==31))


Here’s another long one. If the month is equal to four, six, nine, or eleven and “date” is 31, “date” now becomes 30. We’re going backwards again.

if ((month==2) && (date>28)) date=29;

If “month” is equal to 2 and date is greater than 28, date is equal to 29.

if (((month==2) && (date>28)) && (leap!=0)) date=28;

If “month” is equal to 2, and “date” is greater than 28, “date” is equal to 29.

Now that we’ve set all of the date and time numeric data correctly, we use a “for” loop to set the month.

for (i=1;i<13;i++){
if (month==i) {month=m[i];

The variable “i” equals one. As long as “i” is less than 13 (there were 13 elements in the array) the loop can continue. Each time it loops, “i” goes up by one.

If “month” is equal to the number “i” represents, then “month” is equal to the text from the array. All this basically does is attach the text to the month. It could have been done a little more simplly than this, but this is how the author decided it was done best.

UGH! No more. Enough IF for one day. Next week, we’ll place the clock.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories