Excellent Fundamental...!!!

JavaScript Status clock - Advance

In previous article JavaScript Status clock – Basic we see simple technique to add clock at browser status bar. Now we are going to manipulate data which we get from Date object constructor. Using the date object and some of its methods, you can create your own JavaScript clock customized to our needs.

Here we are going to use some method supported by Date object are as follows…

Table 1 Methods we have used in our example
Method Function	What the Function Does
getHours()	Returns the current number of hours (e.g. 0-23)
getMinutes()	Returns the current number of minutes (e.g. 0-59)
getSeconds()	Returns the current number of seconds (e.g. 0-59)
getDate()	Returns the day of the month (e.g. 1-31)
getMonth()	Returns the number of months (e.g. 0-11)
getDay()	Returns the day of week (e.g. 0-6)
getFullYear()	Returns the year, as a four-digit number (e.g. 2007)

First of all we define variable var currentDate=new Date() and create a date object. An advantage of using objects is that objects can hold multiple values, where variables can only keep one value at a time. And then using above method get the required parameter stored in variable.

var TimeStamp, month, period, day, year;
hour = currentDate.getHours()
min = currentDate.getMinutes()
sec = currentDate.getSeconds()
year = currentDate.getFullYear()
date = currentDate.getDate()

To get day of week we use a switch condition and depending of value given by currentDate.getDay() we get desired day of week.

switch(currentDate.getDay()){
case 0:day="Sunday";break;
case 1:day="Monday";break;
case 2:day="Tuesday";break;
case 3:day="Wednesday";break;
case 4:day="Thursday";break;
case 5:day="Friday";break;
case 6:day="Saterday";break;
}

We repeat same process to get Month. currentDate.getHours() returns the number of hours into the day. This value is a number between 0 and 23. What can we do if we do not want a 24 hour clock, if we don't want 22:35 but want 10:35 P.M.? To solve the problem here we have use simple conditional operator and if the hour is greater than 12 subtract 12 from it.

if (hour>12){hour-=12;period="pm"} else {period="am"}
if (currentDate.getHours()==12){period="pm"}
if (currentDate.getHours()==24){period="am"}

Now, you go through the detail script:

<script type="text/javascript">
function time(){
var currentDate=new Date()
var TimeStamp,month,period,day,year;
hour=currentDate.getHours()
min=currentDate.getMinutes()
sec=currentDate.getSeconds()
year=currentDate.getFullYear()
date=currentDate.getDate()

switch(currentDate.getDay()){
case 0:day="Sunday";break;
case 1:day="Monday";break;
case 2:day="Tuesday";break;
case 3:day="Wednesday";break;
case 4:day="Thursday";break;
case 5:day="Friday";break;
case 6:day="Saterday";break;
}
switch(currentDate.getMonth()){
case 0:month="January";break;
case 1:month="Febuary";break;
case 2:month="March";break;
case 3:month="April";break;
case 4:month="May";break;
case 5:month="June";break;
case 6:month="July";break;
case 7:month="August";break;
case 8:month="September";break;
case 9:month="October";break;
case 10:month="November";break;
case 11:month="December";break;
}

if(sec<10){sec="0"+sec}
if(min<10){min="0"+min}

if(hour>12){hour-=12;period="pm"} else {period="am"}
if(currentDate.getHours()==12){period="pm"}
if(currentDate.getHours()==24){period="am"}

var TimeStamp=day+" "+month+" "+date+" "+year+" "+hour+":"+min+":"+sec+" "+period
window.status=TimeStamp
window.setTimeout("time()",300)
}
time()
</script>

This will give you output as shown in figure below…

Example:

Please download source code to see example...