 |
Web Hosting by Netfirms | Free Domain Names by Netfirms |
|
|
|
The following example is going to display digital clock in the middle of the screen. The clock is reference every one second to make it behave like a normal clock. Run Code | View Code
<form name="myForm">
<input type="text" name="timeFiled">
</form>
<body
onLoad="
setInterval('showCurrentTime()',1000)"
>
The showCurrentTime function's purpose is to show the current time.
The function is called after one second has expired by the setInterval method of the window object. The calling process is infinitive, it never stops because the setInterval method keeps calling this function after every one second.
The setIntervl method is called by the onLoad event of the document. Therefore as soon as the document loads this function is called and the clock makes it's first tick and comes to life.
Once the function is called it declares five local variables: myDate , seconds, minuets, hours timeStr. MyDate is used to store an instance of the Date object, Seconds, minuets, and hours are used to store the current time and timeStr is used to store a digitized version of the time.
The function then makes a new Date object and calls it myDate. In other words it makes an instance of the Date object and references it to myDate.
myDate = new Date()
After an instance of date is created it then uses it's get methods to extract time segments out of it and place them into the time variables. getSeconds assigns the seconds variable with the current second. getMinutes assigns the minutes variable with the current minute and getHours assigns the hours variable with the current hour.
seconds = myDate.getSeconds()
minutes = myDate.getMinutes()
hours = myDate.getHours()
The digitizes function is then called and passed hours, minutes, and seconds to get a formatted representation of a digital clock and sets it into timeStr.
timeStr = digitizes(hours, minutes, seconds)
The digitizes function does it's job by formatting the given hours, minutes and seconds. If hours, minutes or seconds are less then nine it inserts a zero (0) before the hours, minutes or seconds it also puts a colon (:) after the hours and minutes. Once it's fomated the digital format is returned.
It then makes the value of the time text field the same value as the digitized format in timeStr.
document.myForm.timeFiled.value = timeStr
function showTime(){
var myDate
Current second
var seconds
Current minute
var minuets
Current hour
var hours
Formatted time
var timeStr
Create an instance of the built in Date object and
assign this instance of the Date object to myDate variable.
myDate = new Date()
Use the getSecounds method of myDate instance to get the current second
and insert the returned value into the seconds variable
seconds = myDate.getSeconds()
Use the getMinutes method of myDate instance to get the current minute
and insert the returned value into the minutes variable
minutes = myDate.getMinutes()
Use the getHours method of myDate instance to get the current hour
and insert the returned value into the hours variable
hours = myDate.getHours()
Call the digitizes function to format the current seconds,minutes,hours
timeStr = digitizes(hours,minutes,seconds)
Make the value of the text field the same value as timeStr
document.myForm.timeFiled.value = timeStr
Define the digitizes function
When the digitizes function is called and is passed hours, minutes, and seconds it returns a formatted representation of a digital clock.
The digitizes function does it's job by formatting the given hours, minutes and seconds. If hours, minutes or seconds are less then nine it inserts a zero (0) before the hours, minutes or seconds it also puts a colon (:) after the hours and after the minutes. Once it's formatted digital format it returns the formatted digitalFormat.
function digitizes(seconds,minutes,hours){
var args
Digital format representation
var digitalFormat
Get this function's argument array and set it on it args
args = digitizes.arguments
Initialize digitalFormat to a empty-string since the loop uses += operator
digitalFormat = ""
Scan through every time segment and check if it is less then nine, if it is insert a zero(0)
before the segment. Also insert a colon (:) after each segment
for(var i=0;i<=args.length-1; i++){
if(args[i] <=9){
digitalFormat += "0"
}
Append the current argument and a colon (:) to digitalFormat
digitalFormat += args[i] + ":"
}
return digitalFormat.substring(0,digitalFormat.length-1)
}
}
The Date object can be used to set the expiration date when making cookies it can also be used if you want to know what time the user visited your web site.
The Date is a top level built in JavaScript object that must be instanced or a version of it must be created so the time can be extracted form it with the inherited version's methods.
See also: Making cookies | Using setTimeout