This will allow you to read the seconds portion of time from your script, based upon the way you have set your Date() variable.
dt=new Date();
sec=dt.getSeconds();
sec will be set equal to a numeric from 0 through 59.
Writing Scripts with Date and Time
Well, that was kinda intense, hunh? If you aren't just a bit confused, I feel compelled to tell you that I wish to worship at the altar of your feet!
OK. Let's play with a script that simply prints the date and time to your page at the time the visitor enters your page.
<HTML><HEAD>
<TITLE>Simple Date, Time</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
function getDt(){
dt=new Date();
/* Now build the string for the
calendar date. */
cal=""+(dt.getMonth()+1)+"/"
+dt.getDate()+"/19"
+dt.getYear();
// Now set the time variables
hrs=dt.getHours();
min=dt.getMinutes();
sec=dt.getSeconds();
// And then correct to civilian time
tm=" "+((hrs>12)?hrs-12:hrs)+":";
tm+=((min<10)?"0":"")+min+":";
tm+=((sec<10)?"0":"")+sec+" ";
tm+=(hrs>=12)?"p.m.":"a.m.";
document.write(cal+tm);
}
// End Hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<CENTER>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
getDt();
// End Hiding -->
</SCRIPT>
</BODY>
</HTML>
Click Here to See the Script.
Ah, but that is so unsatisfying, somehow! You really would prefer to have the time kept current, rather than simply displaying the time way back when the visitor first loaded your page.
Well, I've been watching you, and I think you are ready for the next big step: time outs.
You can tell your visitors' computers to wait awhile and then do something. For a clock, you can tell their computers to wait exactly one second and then print the current time to screen.
Or, if you aren't displaying seconds, you can tell their computers to wait a full minute and then redisplay the time.
Here are the two calls you'll need:
setTimeout(variable,x);
This very important call is used in dozens of different ways and you will be using it in many of your scripts - not just for on-screen real-time clocks, but for animation and buttons which light and depress, etc.
variable is generally a JavaScript instruction that you want to occur. x is the number of milliseconds you want to elapse before that instruction is implemented.
Since you probably don't do many things with milliseconds, it won't hurt to remember that 1000 milliseconds = 1 second.
It is important to remember that nothing at all happens with a .setTimeout() call until after the specified time has elapsed. The call won't be implemented at all if the user leaves the page before the time has elapsed.
This call performs the variable instruction only once. If you want it to be performed repeatedly, you must set it in a loop of some sort.
Giving Timeouts a Name
There will be occasions when you wish to define a second variable that can interrupt a .setTimeout() call that you have initiated within a loop.
This built-in capability to name a .setTimeout() gives you a "hook" that will allow you to exit that loop and stop the process.
The following examples will show you a couple samples of this combo.
<HTML><HEAD>
<TITLE>Reflexes Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JS-Impaired Browsers
function slowReflex(){
alert("Your reflexes are really slow!!!");
}
function startIt(){
dmp=(setTimeout("slowReflex()",5000));
}
// End Hiding -->
</SCRIPT>
</HEAD>
<BODY>
If you are not already brain dead, click the button below
within 5 seconds and nothing will happen
<FORM>
<INPUT TYPE="button"
VALUE=" Reflex Test " NAME=""
onClick="clearTimeout(dmp)">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JS-Impaired Browsers
startIt();
// End Hiding -->
</SCRIPT>
</BODY>
</HTML>
Click Here to see this script.
clearTimeout(variable);
This call cancels a timeout that was set (and is still looping) by calling the variable name that was affixed ("hooked") to the setTimeout() call.
Here's a script that employs both the calls to display a real time clock with the display sent to a form element on screen:
<HTML><HEAD>
<TITLE>Form Element Clock 1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JS-Impaired Browsers
var flg=0;
function bgnIt(){
/* First we check to see that our clock
is not running. If flg is set to 1 we want
to stop it. */
if (flg!=0){
clearTimeout(dispIt);
flg=0;
}
doIt(); // OK, we can start clock loop
}
function doIt(){
dt=new Date();
hrs=dt.getHours();
min=dt.getMinutes();
sec=dt.getSeconds();
str=""+((hrs>=12)?" pm":" am");
hrs= ((hrs>12)?hrs-12:hrs);
str=hrs+((min< 10)?":0":":")+min
+((sec<10)?":0": ":")+sec+str;
document.ug.ly.value=str;
dispIt=setTimeout("doIt()",1000);
flg=1;
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white"
onLoad="bgnIt()">
<CENTER>
<FORM NAME="ug">
<INPUT TYPE="text" NAME="ly" SIZE=15
VALUE ="">
<BR>Start Clock
<INPUT TYPE="radio" NAME="rb"
VALUE="a" onClick="bgnIt()" CHECKED>
<BR>Stop Clock
<INPUT TYPE="radio" NAME="rb"
VALUE="b"
onClick="flg=1;clearTimeout(dispIt);">
</FORM>
</BODY>
</HTML>
Click Here to see this script.
At times you may want to fancy the display somewhat:
<HTML><HEAD>
<TITLE>Form Element Clock 2</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
var flg=0;
today=new Date();
M=new Array("January","February","March","April","May","June",
"July","August","September","October","November","December");
D=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday",
"Friday","Saturday");
function stopit(){
if(flg==1){
clearTimeout(tmout);
}
flg=0;
}
function startit(){
stopit();
Clock();
}
function Clock(){
now=new Date();
hrs=now.getHours();
min=now.getMinutes();
sec=now.getSeconds();
ls=((hrs>12)?hrs-12:hrs)+":";
ls+=((min<10)?"0":"")+min+":";
ls+=((sec<10)?"0":"")+sec+" ";
ls+=(hrs>=12)?"p.m.":"a.m.";
document.frm.tm.value=ls;
tmout=setTimeout("Clock()",1000);
flg=1;
}
//-->
</SCRIPT>
</HEAD>
<!--We start the clock running in the BODY call-->
<BODY onLoad="startit()"
BGCOLOR="FFFFFF">
<CENTER>
<B>JavaScript to Print a Simple Form
Element Clock to Screen</B>
<FORM NAME="frm">
<TABLE BORDER=2>
<TR>
<TD VALIGN=TOP ALIGN=CENTER>
<INPUT TYPE="text" NAME="tm" SIZE=13 VALUE ="">
</TD></TR>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
document.write("<TR><TD>"
+D[today.getDay()]
+", "+M[today.getMonth()]
+" "+today.getDate()+", 19"
+today.getYear()+"</TD></TR>");
// End Hiding -->
</SCRIPT>
<TR><TD>
<INPUT TYPE="radio" NAME="rb" VALUE="a"
onClick="stopit()"> Stop the Clock
</TD></TR>
<TR><TD>
<INPUT TYPE="radio" NAME="rb" VALUE="b"
onClick="startit()" CHECKED> Start the
Clock</TD></TR>
</TABLE></FORM>
<!--Your Web Page goes here-->
</BODY>
</HTML>
Click Here to See This Script.
To make your clock more "elegant" and to have it display without the "jerkiness" of the form element type update, you need to use image swaps.
The image swap calls are discussed in more detail in Chapter Twenty-Two.
<HTML><HEAD>
<TITLE>Image Swap Clock 3</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
var ns="0123456789";
var flg=0;
today=new Date();
M=new Array("January","February","March","April","May","June",
"July","August","September","October","November","December");
D=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday",
"Friday","Saturday");
function stopit(){
if(flg==1){
clearTimeout(tmout);
}
flg=0;
}
function startit(){
stopit();
Clock();
}
function prtIt(){
// Just printing the colons one time here
document.images[2].src="nr/c.gif";
document.images[5].src="nr/c.gif";
startit();
}
function Clock(){
dt=new Date();
hrs=dt.getHours();
min=dt.getMinutes();
sec=dt.getSeconds();
document.images[9].src=((hrs>=12)?"nr/pm.gif":"nr/am.gif");
hrs=((hrs>12)?hrs-12:hrs);
document.images[0].src=((hrs<10)?"nr/w.gif":"nr/1.gif");
hrs=((hrs>9)?hrs-10:hrs);
document.images[1].src="nr/"+hrs+".gif";
ls=((min<10)?"0":"")+min;
for (var i=0;i<2;i++){
document.images[i+3].src="nr/"+ns.indexOf(ls.charAt(i))+".gif";
}
ls=((sec<10)?"0":"")+sec;
for (var i=0;i<2;i++){
document.images[i+6].src="nr/"
+ns.indexOf(ls.charAt(i))+".gif";
}
tmout=setTimeout("Clock()",1000);
flg=1;
}
//-->
</SCRIPT>
</HEAD>
<!--We start the clock running in the BODY call-->
<BODY onLoad="prtIt()"
BGCOLOR="FFFFFF">
<CENTER>
<B>JavaScript to Print an Image Swap Clock to Screen</B>
<P><FORM NAME="frm">
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
document.write('<TABLE BORDER=0>'
+'<TR><TD VALIGN=TOP ALIGN=CENTER>'
+'<BR>');
for (var i=0;i<10;i++){
if (i==9){
w=30;
}
else{
w=(i==2||i==5||i==8?8:14);
}
document.write('<IMG SRC="nr/w.gif" WI'
+'DTH='+w+' HEIGHT=20 BORDER=0>')
}
document.write("</TD></TR><TR><TD ALI"
+"GN=CENTER><FONT SIZE=4><B>"
+D[today.getDay()]+", "+M[today.getMonth()]
+" "+today.getDate()
+", 19"+today.getYear()
+"</B></FONT></TD></TR>");
// End Hiding -->
</SCRIPT>
<TR><TD ALIGN=CENTER><BR>
<INPUT TYPE="radio" NAME="rb" VALUE="a"
onClick="stopit()"> Stop the Clock
<INPUT TYPE="radio" NAME="rb" VALUE="b"
onClick="startit()" CHECKED> Start the
Clock</TD></TR>
</TABLE></FORM>
<P>
</BODY>
</HTML>
Click Here to See This Script.
Calendars
The same new Date() call we've been using for clocks can also be used to build calendars - simple ones or more complex variable event calendars - depending upon what your pages need.
The simplest calendar is one for this month.
<HTML><HEAD>
<TITLE>Basic Calendar</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
var flg=0;
/* The var fs below is set to control the
font size (and hence the overall size of
the calendar) You may set it at any
value from 1 through 7. */
var fs=7;
/* The var bg is set equal to cyan to
control the background color of the
calendar. You may change it to any of
the literal word colors (see Appendix
C) that you prefer. */
var bg="cyan";
M=new Array("January","February","March","April","May","June",
"July","August","September","October","November","December");
D=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday",
"Friday","Saturday");
// Last day of months string:
d="312831303130313130313031";
function Calendar(){
/* First we get the present date and
time. Then we set mo equal to the
month (0 - 11), and yr equal to last two
digits of the year. Next we prefix the
year with 19 to complete it. */
today=new Date();
mo=today.getMonth();
yr=today.getYear();
yr1="19"+yr;
/* Now we get the date and time for this
month on the first day of the month.
Why? It's a quick and dirty way to find
the day of the week that the first falls
on. You could use a loop and count
backwards to the first, keeping track
of the weekdays as you went, of
course. */
bgn=new Date(M[mo]+" 1,"+yr1);
dy=bgn.getDay();
/* Now, convert the string yr1 into a
numeric and test for leap year. If it is,
change the end of month day string
for Feb to 29 */
yr=eval(yr1);
if (yr/4==Math.floor(yr/4)){
d=d.substring(0,2)+"29"
+d.substring(4,d.length);
}
/* Finally, pick the end of month day from
the d string for this month. */
pos=(mo*2);
ld=eval(d.substring(pos,pos+2));
/* Now we are finally ready to shoot the
mess to screen. Ain't life grand? Initiate
the HTML for the table, then write the
month and year. */
document.write("<TABLE BORDER=2"
+" BGCOLOR='"+bg
+"'><TR><TD ALIGN=CENTER COLSPAN=7>"
+"<FONT SIZE="+fs+">"+M[mo]+" "+yr
+"</FONT></TD></TR><TR><TR>");
/* Now write the days of the week from
that array into their own teensy
row. */
for (var i=0;i<7;i++){
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE=1>"+D[i]+"</FONT></TD>");
}
document.write("</TR><TR>");
/* Now we print the first week of the
month to screen, skipping the cells
until we finally encounter the day of
the week corresponding to the first
day of the month. */
ctr=0;
for (var i=0;i<7;i++){
if (i<dy){
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE="+fs+"> </FONT>"
+"</TD>");
}
else{
ctr++;
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE="+fs+">"+ctr+"</FONT>"
+"</TD>");
}
}
document.write("</TR><TR>");
/* OK. Now we can finish up the calendar,
just incrementing and printing cells until
we have printed the last day (ld) of the
month, then skipping cells to finish it
all up. */
while (ctr<ld){
for (var i=0;i<7;i++){
ctr++;
if (ctr>ld){
document.write("<TD ALIGN=CENTER>"
+" </TD>");
}
else{
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE="+fs+">"+ctr+"</TD>");
}
}
document.write("</TR><TR>");
}
document.write("</TR></TABLE>");
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<CENTER>
<!-- Other Web Page Content here, if desired -->
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
Calendar();
// End Hiding -->
</SCRIPT>
<!-- Other Web Page Content here, if desired -->
</BODY>
</HTML>
Click Here to See Script.
OK. You've seen how to do a basic calendar. But you may well want to integrate events for an organization into that calendar to make it more useful for vistors to your site.
But you want to keep maintenance to a minimum. Ain't no easy way to do that, unfortunately.
But a slightly more complicated calendar will integrate events into the display from a monthly events array:
<HTML><HEAD>
<TITLE>Event Calendar</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
var flg=0;
/* You control the size of this calendar
by specifying the font size (from 1
through 7) in the var fs below. */
var fs=5;
today=new Date();
M=new Array("January","February","March","April","May","June",
"July","August","September","October","November","December");
D=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday",
"Friday","Saturday");
d="312831303130313130313031";
/* The events array - E - below uses an
array element for each month from
Jan thru Dec. The string for each
month is indexed with a tilde (~), the
date and a space, followed by the
event description. Substitute the
events you wish here. */
E=new Array();
E[0]="~12 Ice Cream<BR>Social~15 M.L.K"
+"ing Jr.<BR>Birthday~23 Pot Luck<BR>"
+"Dinner~";
E[1]="~12 Lincoln's<BR>Birthday~22 Geo"
+"rge's<BR>Birthday~";
E[2]="~17 St Pat's<BR>Day~28 Good"
+"<BR>Friday~30 Easter~";
E[3]="~6 Daylight<BR>Savings~22 Pass"
+"over~";
E[4]="~11 Mother's<BR>Day~17 Armed"
+"<BR>Forces~30 Memorial<BR>Day~";
E[5]="~14 Flag<BR>Day~15 Father's"
+"<BR>Day~";
E[6]="~4 Independence<BR>Day~17 Con"
+"ference<BR>Day~";
E[7]="~15 Summer<BR>Doldrums~";
E[8]="~1 Labor<BR>Day~22 Autumn"
+"<BR>First~";
E[9]="~12 Columbus<BR>Day~Halloween~";
E[10]="~10 Veteran's<BR>Day~27 Thank"
+"sgiving~";
E[11]="~25 Christmas~";
function Calendar(){
mo=today.getMonth();
yr=today.getYear();
yr1="19"+yr;
bgn=new Date(M[mo]+" 1,"+yr1);
dy=bgn.getDay();
yr=eval(yr1);
if (yr/4==Math.floor(yr/4)){
d=d.substring(0,2)+"29"
+d.substring(4,d.length);
}
pos=(mo*2)
ld=d.substring(pos,pos+2);
document.write("<TABLE BORDER=2"
+" BGCOLOR='cyan'><TR><TD ALIG"
+"N=CENTER COLSPAN=7><FONT SIZE="
+fs+"><B>"+M[mo]+" "+yr
+"</B></FONT></TD></TR><TR>");
for (var i=0;i<7;i++){
document.write("<TD ALIGN=CENTER"
+" WIDTH=14%><FONT SIZE=1>"
+D[i]+"</FONT></TD>");
}
document.write("</TR><TR>");
ctr=0;
for (var i=0;i<7;i++){
/* If the ctr is less than the day of the
week determined to be the first day
of the month, print a space in
this cell of the table. */
if (i<dy){
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE="+fs+"> </FONT>"
+"</TD>");
}
/* Otherwise, write date and the event,
if any, in this cell of the table. */
else{
ctr++;
di=i; // carry var i outside this routine
dupWrt();
}
}
document.write("</TR><TR>");
while (ctr<ld){
for (var i=0;i<7;i++){
ctr++;
/* If the ctr is greater than the last
day of the month, print a space in
this cell of the table. */
if (ctr>ld){
document.write("<TD ALIGN=CENTER>"
+" </TD>");
}
/* Otherwise, write date and the event,
if any, in this cell of the table. */
else{
di=i; // carry var i outside this routine
dupWrt();
}
}
document.write("</TR><TR>");
}
document.write("</TR></TABLE>");
}
function dupWrt(){
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE="+fs);
if (di==0){
// Sundays red
document.write(" COLOR='red'");
}
/* For dates without an event, an
HTML padder that will align dates
properly with dates having an
event. Here, space break space. */
tmp=" <BR> ";
/* Then check for event in this month's
events array for this date. If present,
rewrite the tmp variable to contain
the event. */
pos=E[mo].indexOf("~"+ctr+" ");
if (pos>-1){
tmp=E[mo].substring(pos+3,E[mo].length);
pos=tmp.indexOf("~");
tmp=tmp.substring(0,pos);
}
document.write("><B>"+ctr
+"</B></FONT><BR><FONT SIZE=1>"
+tmp+"</TD>");
}
// End Hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white"><CENTER>
<B>JavaScript to Print an Events Calendar to Screen</B><P>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
Calendar();
// End Hiding -->
</SCRIPT>
</BODY>
</HTML>
Click Here to See Script.
That was a pretty complicated script, but let's not stop there. Another format for you calendar that will be useful on your pages from time to time is the quarterly calendar.
This next script simply takes your simple calendar script and repeats it three times to screen -- once for last month, once for this month and once for next month. Pretty awesome!
<HTML><HEAD>
<TITLE>Basic Quarter Calendar</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
/* This script is simply and adaptation of
the simple calendar script we've already
seen. All that is done is to subtract a
month to commence the quarterly
calendar with last month and to print
the three months to screen. */
var flg=0;
/* The var fs below is set to control the
font size (and hence the overall size of
the calendars) Because three calendars
take up room, lower value probably
best */
var fs=1;
/* The var bg is set equal to cyan to
control the background color of the
calendar. You may change it to any of
the literal word colors (see Appendix
C) that you prefer. */
var bg="cyan";
M=new Array("January","February","March","April","May","June",
"July","August","September","October","November","December");
/* Note that day names were abbreviated
in the array for this script to reduce
;width of the calendar overall. */
D=new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
function getBgn(){
pdy=new Date(); // today
pmo=pdy.getMonth(); // present month
pyr=pdy.getYear(); // present year
yr=(pmo==0?pyr-1:pyr); // last mo year
mo=(pmo==0?11:pmo-1); // last month
yr1="19"+yr;
// assign last month stuff to date
bgn=new Date(M[mo]+" 1,"+yr1);
document.write('<TABLE BORDER=0>"
+"<TR><TD VALIGN=TOP>');
Calendar(); // Send last month to screen
document.write('</TD><TD VALIGN="
+"TOP>');
yr=pyr; // present year
mo=pmo; // present month
yr1="19"+yr;
// assign present stuff to date
bgn=new Date(M[mo]+" 1,"+yr1);
Calendar(); // Send this month to screen
document.write('</TD><TD VALIGN"
+"=TOP>');
yr=(pmo==11?pyr+1:pyr);// next mo year
mo=(pmo==11?0:pmo+1); // next month
yr1="19"+yr;
// assign next month stuff to date
bgn=new Date(M[mo]+" 1,"+yr1);
Calendar(); // Send next month to screen
// Finish up
document.write('</TD></TR></TABLE>');
}
function Calendar(){
/* All we do here is take the value for the
month to be sent to screen and
perform the same analysis for each in
sequence. */
dy=bgn.getDay();
/* Now, convert the string yr1 into a
numeric and test for leap year. If it is,
change the end of month day string
for Feb to 29 */
yr=eval(yr1);
d="312831303130313130313031";
if (yr/4==Math.floor(yr/4)){
d=d.substring(0,2)+"29"
+d.substring(4,d.length);
}
pos=(mo*2);
ld=eval(d.substring(pos,pos+2));
/* Now we are finally ready to shoot the
mess to screen. Ain't life grand? Initiate
the HTML for the table, then write the
month and year. */
document.write("<TABLE BORDER=1"
+" BGCOLOR='"+bg
+"'><TR><TD ALIGN=CENTER COLSPAN=7>"
+"<FONT SIZE="+fs+">"+M[mo]+" "+yr
+"</FONT></TD></TR><TR><TR>");
for (var i=0;i<7;i++){
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE=1>"+D[i]+"</FONT></TD>");
}
document.write("</TR><TR>");
ctr=0;
for (var i=0;i<7;i++){
if (i<dy){
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE="+fs+"> </FONT>"
+"</TD>");
}
else{
ctr++;
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE="+fs+">"+ctr+"</FONT>"
+"</TD>");
}
}
document.write("</TR><TR>");
while (ctr<ld){
for (var i=0;i<7;i++){
ctr++;
if (ctr>ld){
document.write("<TD ALIGN=CENTER>"
+" </TD>");
}
else{
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE="+fs+">"+ctr+"</FONT>"
+"</TD>");
}
}
document.write("</TR><TR>");
}
document.write("</TR></TABLE>");
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<CENTER>
<P><B>JavaScript to Print Quarterly Calendar to Screen</B>
<P><SCRIPT LANGUAGE="JavaScript">
<!--Hide from JS-Impaired Browsers
getBgn();
// End Hiding -->
</SCRIPT>
</BODY>
</HTML>
Click Here to See This Script.
Finally, some of the other calls that will be useful for building other kinds of calendars you might wish to display and some esoteric stuff.
variable.getTime();
This sets variable equal to the number of milliseconds since January 1, 1970.
Caution: This is a carry variable used to transfer values of one date to another date variable. You do not get a useful time for most purposes. Instead, use the Date() function to get both date and time.
This is generally used in conjunction with setTime() when converting a date other than the current date.
fwddt=new Date("July 4, 1997);
dt=new Date()
dt.setTime(fwddt.getTime());
Which results in the value of fwddt being assigned to dt. You might well ask, "Why not just do it in the first place?" Ah, a good question, indeed.
variable.getTimezoneOffset();
This will set variable equal to the difference in minutes between the local time (i.e. on the present server) and Greenwich, UK Mean Time (GMT) - sometimes referred to in the Military as Time Zulu.
dt=new Date();
diff=dt.getTimezoneOffset(); // minutes
diff=dt.getTimezoneOffset()/60; // hours
Both the differences were shown here, since it is easy to forget that the numeric value which is returned by .getTimezoneOffset() is in minutes and not hours.
x=Date.parse(variable);
x will be set equal to the number of milliseconds since January 1, 1970 00:00:00 (local time)
variable is a literal date or a variable you have set equal to a date. This can be a short or long version, and may include the Greenwich Mean Time offset.
str1="Dec 25, 1996 15:45:00";
str2="Wed,25 Dec 1996 15:45:00 GMT";
str3="Wed,25 Dec 1996 15:45:00 "
+"GMT-0700";
nr=Date.parse(str1); // or str2 or str3
nr=Date.parse("Dec 25, 1996");
In str1, the local time zone is assumed. If this isn't a bit confusing, you haven't been paying attention. Go back and re-read it!
variable.setMonth(x);
variable is a literal or sets the Month of the year for a specified date, using values for x from 0 through 11
dt.setMonth(5);
variable.setDate(x);
variable is a literal or variable that sets the day of the month for a specified date using x with values from 1 to 31. (Does not start with 0)
This call set the day for dt to 6/4/97.
dt=new Date("July 1, 1997 00:00:00");
dt.setDate(4);
variable.setHours(x);
variable is a literal or variable that sets the hours of the day for a specified date, using values for x from 0 through 23:
dt.setHours(13);
variable.setMinutes(x);
variable is a literal or variable that sets the hours of the day for a specified date, using values for x from 0 through 59:
dt.setMinutes(20);
variable.setSeconds(x);
variable is a literal or variable that sets the seconds of the hour for a specified date, using values for x from 0 through 59:
dt.setSeconds(45);
variable.setTime(x);
variable is a literal or variable that sets the value for a date, using values for x equal to the number of milliseconds since January 1, 1970 at 00:00:00.
dt = new Date("December 25, 1997");
x=dt.getTime(); // Now x = milliseconds
newdt = new Date();
newdt.setTime(x);
.getTime() got the number of milliseconds, while .setTime() converted the milliseconds to set the date in newdt.
variable.toGMTString();
variable is a literal or variable that converts a date to a string, using the Internet GMT (Greenwich Mean Time) practices.
The exact format of the value returned by .toGMTString() varies according to the server or machine being used.
dt = new Date();
dt.toGMTString();
You'll have to test this call on your own server to see exactly what format the GMT date/time string will be returned. Something like this will be the result of the code just above:
dt="Thu, 12 Dec 1996 13:42:01 GMT";
variable.toLocaleString()
This is a flaky call that will convert your date to a string using the current environment conditions.
Since it is really unpredictable, I recommend you parse "the old-fashioned way", that is, using the .getHours(), .getMinutes() and .getSeconds() calls described earlier in this chapter. But you do as you wish.
dt=new Date();
dt.toLocaleString();
variable=new Date(Date.UTC());
This is a tricky little bugger that you should not really need. The syntax is different than with the other date/time calls, so be careful.
variable will be set to the UTC date. But since Date.UTC() returns the number of milliseconds in a date object since January 1, 1970 00:00:00, Universal Coordinated Time (GMT) - a so-called "static method", it needs to be implemented directly as shown below, rather than as a dt=new Date(), etc. kind of call. Here's Netscape's® documentation:
"Syntax:
Date.UTC(year,month,day [,hrs] [,min] [,sec])
year is a year after 1900.
month is a month between 0-11.
date is a day of the month between 1-31.
hrs is hours between 0-23.
min is minutes between 0-59.
sec is seconds between 0-59."
dt=new Date(Date.UTC(96,11,1,0,0,0));
variable.setYear(x);
You use this call to set variable to a year as specified by x. x is the year you wish minus 1900. For example, if you wished to use the year 1997, 1997 - 1900 = 97, so x may be a literal numeric or a variable you've set equal to the desired numeric value.
dt=new Date();
x=97;
dt.setYear(97); // Using literal
dt.setYear(x); // Using variable
