PageResource.com - Web Development Tutorials

JavaScript Clock 2

Adding a few more features

Now, maybe you want your clock to include the day of the week and the date as well. This clock will iclude these features. Also, we will start the clock by calling the function inside the body section, so that the entire page does not have to load before the clock starts. Let's take a look at what the new clock will look like:

Current Time:

Yes, more information. This requires a few more things in the script to make it work the way we want it to. Be sure you have read the first clock tutorial before you proceed. It will cover some things you will want to know before going through this section.

Now, let's take a look at the script. You will notice we called more member functions of the date object to get the extra information. See what other differences you can find before we get to the details. Here is the script:

<HEAD>
<SCRIPT language="JavaScript">
<!--

function startclock()
{
var thetime=new Date();

var nhours=thetime.getHours();
var nmins=thetime.getMinutes();
var nsecn=thetime.getSeconds();
var nday=thetime.getDay();
var nmonth=thetime.getMonth();
var ntoday=thetime.getDate();
var nyear=thetime.getYear();
var AorP=" ";

if (nhours>=12)
    AorP="P.M.";
else
    AorP="A.M.";

if (nhours>=13)
    nhours-=12;

if (nhours==0)
   nhours=12;

if (nsecn<10)
 nsecn="0"+nsecn;

if (nmins<10)
 nmins="0"+nmins;

if (nday==0)
  nday="Sunday";
if (nday==1)
  nday="Monday";
if (nday==2)
  nday="Tuesday";
if (nday==3)
  nday="Wednesday";
if (nday==4)
  nday="Thursday";
if (nday==5)
  nday="Friday";
if (nday==6)
  nday="Saturday";

nmonth+=1;

if (nyear<=99)
  nyear= "19"+nyear;

if ((nyear>99) && (nyear<2000))
 nyear+=1900;

document.clockform.clockspot.value=nhours+": "+nmins+": "+nsecn+" "+AorP+" "+nday+", "+nmonth+"/"+ntoday+"/"+nyear;

setTimeout('startclock()',1000);

} 

//-->
</SCRIPT>
</HEAD>

<BODY>

<FORM name="clockform">
Current Time: <INPUT TYPE="text" name="clockspot" size="40">
</FORM>
<SCRIPT language="JavaScript">
<!--
startclock();
//-->
</SCRIPT>

</BODY>

Yipes! This is pretty long, isn't it? Actually, it is most of the script is getting the numbers to do what we require for our clock to look like the one above. Let's take a closer look at what we have added.

More Member Function Calls

We are calling more of the member functions in order to get the extra information. The ones we have added are calls to getDay() for the number of days into the week, getMonth() for the number of months into the year, getDate() for the actual day of the month, and getYear() for the number of years into the century. We assigned them all to variables so we could manipulate the numbers to display what we want. Here are the variable declarations:

var nday=thetime.getDay();
var nmonth=thetime.getMonth();
var ntoday=thetime.getDate();
var nyear=thetime.getYear();

Now we have variables with our new information, but some of them are not quite in the form we want them to be. The only one we do not have to change is "ntoday", which gives us the day of the month- a number such as 1, 2 ,15, 30, etc. So, we know whether it is the first, second, 15th, or 30th of the month. The other variables have values that need changing though.

Adjusting the Variable Values

Let's look at the variable "nday". This holds our value for the day of the week. However, the value is a number. Not only that, the numbers are 0-6 rather than 1-7. Changing this to the actual day of the week isn't so bad, we just have to check what the number is, and change the value to "Sunday" if the number is zero, "Monday" if the number is 1, and so on. Here is the portion of the code that does this, using if conditions:

 if (nday==0)
  nday="Sunday";
if (nday==1)
  nday="Monday";
if (nday==2)
  nday="Tuesday";
if (nday==3)
  nday="Wednesday";
if (nday==4)
  nday="Thursday";
if (nday==5)
  nday="Friday";
if (nday==6)
  nday="Saturday";

Now, let's look at nmonth. It is the number of months into the current year. However, instead of starting at 1 and going to 12- it starts at zero and goes to 11. To make it display the traditional number for the month (1 for Jan., 2 for Feb., etc.), we will need to add one to this value:

nmonth+=1;

Remember, the += operator adds one to the value of nmonth. We could have written it as:

nmonth= nmonth+1;

Now, we have to get the year. Our variable nyear gives us the number of years into the current century- the last two numbers of the year such as 98 or 99. One problem- the dreaded Y2K problem. In IE5+, the date actually goes to 4 numbers, to 2000. In NS 4.6 the date flips to 100- not zero! I found the code below works for these two browsers, though I did not check it with older versions- but those may have other Y2K bugs to worry about. So, if the year comes back as 99, I added a 19 in front. If it is between 99 and 2000, I added 1900 to it (100+1900=2000) so NS would work with it. IE just gives back 2000 so if it is more than 2000 it can be left alone.

if (nyear<=99)
  nyear= "19"+nyear;

if ((nyear>99) && (nyear<2000))
 nyear+=1900;

End the Script

All that is left in the main script is to output our values to the text box. This clock used the code below:

 
document.clockform.clockspot.value=nhours+": "+nmins+": "+nsecn+" "+AorP+" "+nday+", "+nmonth+"/"+ntoday+"/"+nyear;

Now, end the function by calling it again after one second:

setTimeout('startclock()',1000);

The HTML, Call the Script

The HTML to display the clock is the same as before. The only additions are the SCRIPT tags and the call to the startclock() function. This is so the clock starts right when the browser knows the text box exists and has the names in the name=" " attributes:

 <FORM name="clockform">
Current Time: <INPUT TYPE="text" name="clockspot" size="40">
</FORM>
<SCRIPT language="JavaScript">
<!--
startclock();
//-->
</SCRIPT>

Now you do not need to wait for the rest of the page to load in order to see the clock run. Great, isn't it?

Well, that takes care of the clock for now. Go have fun with it, maybe make some adjustments of your own. Oh, if you see any problems with the Y2K code, or have something that will solve the problem for longer than my code did, or know some code for older browsers, let me know.

Well, that does it for now, let's go on to The Math Object.

previous
Previous
By: John Pollock next
Next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy