Time Zones.

Changables in Red:
Script in Blue:

This script is a AM/PM or 24 Hour Clock that can be set up for as many different Time Zones as you want. You can make adjustment for daylight savings in either the Northern or Southern Hemispheres.

You insert the Clock Colour here: var clockCol= "#ff0000";

You insert the Date Colour here: var dateCol="#0000ff";

You insert the Font Colour here: var fontCol="black";

You insert Font Size here: var siz="4";
Remember: Only Numbers 1 (small) to 7 (Large).

Insert Font here: var fontType= "Times New Roman";
The Font Type can be single or a group: Some common web fonts: Verdana, Arial, Helvetica, sans-serif, Georgia, Times New Roman, Times, serif, Courier New, Courier, mono.

//////////////DO NOT CHANGE ANYTHING FROM HERE////////////


 //////////// TO HERE /////////TO HERE/////////TO HERE///////////

The next thing you'll see is this:
You can only use either AM/PM or 24 Hour clock not both.
So you must block one out or you will cause a conflict.
///////// AM/PM Clock String /////////////////////////////

Date.prototype.toTimeString = function tick () {return
[this.getHours() < 13 ? this.getHours() : this.getHours() - 12, this
.getMinutes() < 10 ? '0' + this.getMinutes() : this. getMinutes(),
this.getSeconds() < 10 ? '0' + this.getSeconds() : this.
getSeconds()].join (':') + (this.getHours() < 13 ? ' AM' : ' PM')}

This is the string I am using; so therefore I must block the other out.

// 24 Hour Clock String ///////////////////////////////////
Date.prototype.toTimeString = function () {return
[this.getHours() < 10 ? '0' + this.getHours() : this.getHours(),
this. getMinutes() < 10 ? '0' + this.getMinutes() : this.
getMinutes(), this.getSeconds() < 10 ? '0' + this.getSeconds()
: this.getSeconds()].join (':')}

To create clock for time zone first we have to Name it so the clock name in this case Date.SmithtonTime next we have to creatate a function to get the clock  so we write = function() {return new Date(). to create a new instance of Date. Next is toUTCOffset(+10+SthHemi) to get the clock and the Time Zone (+10)  and then to get that greatest of all oxymorons Daylight Savings for the Northern or Southern Hemispheres (+SthHemi) and this .toTimeString( )} converts it to written text.

Date.SmithtonTime = function() {return new Date().toUTCOffset
(+10 +SthHemi).toTimeString()}
Date.NewYorkTime = function() {return new Date().toUTCOffset
(-5 +NthHemi).toTimeString()}

You do this for as many time zones as you want. Remembering that it all has to written on ONE LINE!

If you want to put in a date you do basically the same as you did for the clocks. (Date.SmithtonDate)=Date Name (+10)=Time Zone (+NthHemi)= Nth/Sth Hemi's
E.G. Date.SmithtonDate = function() {return new Date().
toUTCOffset (+10 +SthHemi).toLocaleDateString()}
Date.NewYorkDate = function() {return new Date()
.toUTCOffset(-5 +NthHemi).toDateString()}

The same ONE LINE rule applies.

toDateString() gives a Short Date Thu, 11 Nov 2004 and
toLocaleDateString() a Long Date Thursday, 11 November 2004.

To learn more on JavaScrip String Methods Click Here.

Write clocks and Dates into a Parabraph
You need to put this in if you are putting in a date <font color="'+dateCol+' ">'+Spacer+'<span id="SmithtonDate"> ', Date.SmithtonDate (), '</span> </font> if your not putting in the date just put this </p>'); here otherwise as it is Below and remember all on ONE LINE as well.the spacer hold the time and date apart.

With Date:
document.write ('<p><font color="'+fontCol+'" size="'+siz+'" face="'+fontType+'">Smithton Tas<br /><font color="'+clockCol+'"><span id="SmithtonTime">', Date.SmithtonTime (), '</span></font><font color="'+dateCol+'">'+Spacer+'<span id="SmithtonDate"> ', Date.SmithtonDate (), '</span></font></font></p>');

Without Date:
document.write ('<p><font color="'+fontCol+'" size="'+siz+'" face="'+fontType+'">Smithton Tas<br /><font color="'+clockCol+'"><span id="SmithtonTime">', Date.SmithtonTime (), '</span></font></p>');

To write a clock and Date into a paragraph
document.write ('<p><font size="'+siz+'" face="'+fontType+'"> The time in Smithton Tas Australia is <font color="'+clockCol +'"> <span id="SmithtonTime">', Date.SmithtonTime (), '</span></font> <br> and the date is <font color="'+dateCol+'"><span id= "SmithtonDate"> ', Date.SmithtonDate (), '</span> </font>.</font></p>');

To make clocks work (ALL ON ONE LINE)
if (document.getElementById)setInterval("document. getElementById('SmithtonTime').firstChild.data = Date.SmithtonTime (); document.getElementById('NewYorkTime').firstChild.data = Date.NewYorkTime () , 0.2 * Date.oneSec);

Make sure that the maroon text goes in on the last clock before the semicolon or the clock(s) won't work. Then do the same for the dates if you want them or they want change either.

Place this in the <body> of your document where you want the clocks to be: <script>TimeZone();</script>

Select and Copy this Clock
into the <HEAD> tags in your document

May a Higher Power keep you forever in His sight.





Visitor N°   
Free Text Counter.        
Counter added 05/02/2014.