HTML and CSS Reference
In-Depth Information
forms are available. This event can be helpful in synchronizing the loading of a set of
frames, particularly when there might be large images that need to be loaded or all of the
frame data hasn't arrived from the server.
The
onUnLoad
event handler is invoked when the page is exited or reset.
EXAMPLE
13.5
<html>
<head><title>load and unload Events</title>
1
<script type="text/javascript">
2
var sec=0;
3
function now()
{
var newdate= new Date();
var hour=newdate.getHours();
var minutes=newdate.getMinutes();
var seconds=newdate.getSeconds();
var timestr=hour+":"+minutes+":"+seconds;
4
window.setInterval("trackTime()", 1000);
5
alert("Your document has finished loading\n"+
"The time: "+timestr);
}
6
function trackTime(){
7
sec++;
}
8
function howLong(){
alert("You have been browsing here for "+ sec+" seconds");
}
</script>
</head>
9
<body background="blue hills.jpg" onLoad="now();"
10
onUnLoad="howLong();">
<font face="arial,helvetica" size=5>
When you leave or reload this page, <br />an alert dialog box
will appear.
</font>
</body>
</html>
EXPLANATION
1
The JavaScript program starts here.
2
A global variable called
sec
is declared.
3
The user-defined function
now()
contains several of the
Date
object's methods to
calculate the time. This function is used to keep track of how long the user brows-
es from the time the page is loaded until it is exited.
4
The
window
object's
setInterval()
method is set to call the function
trackTime()
ev-
ery 1,000 milliseconds (1 second) starting when the document is loaded until it
is unloaded.
