JavaScript Status clock - Basic

[VelMurugan]

JavaScript Status clock - Basic

In this article we are going to see the ways to add different effects at the status bar of a web browser. The status bar is the small text area in the lower-left corner of a browser window where messages are typically displayed indicating download progress or other browser status items. It is possible to control the contents of this region with JavaScript. Many developers use this region to display short messages. The benefit of providing information in the status bar is debatable, particularly when you consider the fact that manipulating this region often prevents default browser status information from being displayed—information that many users rely upon.

Here we are see how to add clock at our browse status bar. Take a look below on piece of code...

Code Select Expand

<script type="text/javascript" language="javascript">
function BrowserClock() {
window.setTimeout( "BrowserClock()", 1000 );
today = new Date();
self.status = today.toString();
}
BrowserClock()
</script>

Here we have define BrowserClock() function. And use Window object supports methods setTimeout() to call same function after every 1000 milliseconds. The Window object supports methods for setting timers that we might use to perform a variety of functions. These methods include setTimeout() and clearTimeout(). The basic idea is to set a timeout to trigger a piece of script to occur at a particular time in the future. The general syntax is

timerId = setTimeout(script-to-execute, time-in-milliseconds);

As the BrowserClock() get called after every 1000 milliseconds recursively. A new value by Date() class gets stored in variable today. Date class is mostly used for define and manipulate dates. You can get current time as well as date. You can also perform calculation based on date or times using date class. This is not a reserved word so you can declare your own variable or function called Date but if you do then you will not be able to use the Date class.

Code Select Expand


syntax:-
var today = new Date();
var today = new Date(milliseconds);
var today = new Date(dateString);
var today = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Then current value of variable today is assign to self.status which set the status property of window. And display the current date on status bar of your web browser. See figure below...

Wed May, 12 2008. 12:00:00 PM

Source : Techxcel