SHARE
Facebook X Pinterest WhatsApp

HTML Goodies: Script Tip: Week 89

Written By
thumbnail
Joe Burns
Joe Burns
Jan 4, 2005

 

Scripper…

     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

Open Code in a New Window


     Let’s keep moving through the function:



yourOffset=(new Date()).getTimezoneOffset();

yourOffset = yourOffset+adjust

ourDifference=eval(gmtOffset-yourOffset);

var half=eval(ourDifference%60);

ourDifference=Math.round(ourDifference/60);

hour=eval(hour-ourDifference);

     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))



date=30;


     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];

break;

}

}

     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.



TechCrawler


Want more information about
Javascript clocks?
Search the Web.



     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.

Next Week: Fill in 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

Recommended for you...

The Revolutionary ES6 Rest and Spread Operators
Rob Gravelle
Aug 23, 2022
Ahead of Time (AOT) Compilation in Angular
Tariq Siddiqui
Aug 16, 2022
Converting a JavaScript Object to a String
Rob Gravelle
Aug 14, 2022
Understanding Primitive Type Coercion in JavaScript
Rob Gravelle
Jul 28, 2022
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.