Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!-- This example is from the book _JavaScript: The Definitive Guide_. -->
<!-- Written by David Flanagan. Copyright (c) 1996 O'Reilly & Associates. -->
<!-- This example is provided WITHOUT WARRANTY either expressed or implied.-->
<!-- You may study, use, modify, and distribute it for any purpose. -->
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.1">
// open a new window
var n = window.open('', 'f', 'width=400,height=400');
// dynamically create frames in that new window.
// Note the use of the special about:blank URL to get empty frames
n.document.write('<frameset rows="50%,50%" cols="50%,50%">');
n.document.write('<frame name="f1" src="about:blank">');
n.document.write('<frame name="f2" src="about:blank">');
n.document.write('<frame name="f3" src="about:blank">');
n.document.write('<frame name="f4" src="about:blank">');
n.document.write('</frameset>');
// An array of the colors we cycle through for the animation
colors = new Array("red","green","blue","yellow","white");
// An array of the frames we cycle through (in this order)
windows = new Array(n.f1, n.f2, n.f4, n.f3);
// The current color and frame counters
var c = 0, f = 0;
// A variable that holds the current timeout id (used to cancel the timeout)
var timeout = null;
// This function sets the "next" frame in the list to the "next" color
// in the list. We call it once to start the animation, and then it
// arranges to invoke itself every quarter second after that.
function change_one_frame()
{
// dynamically output the HTML necessary to set the background color
windows[f].document.write('<BODY BGCOLOR="' + colors[c] + '">');
windows[f].document.close();
f = (f + 1) % 4; // increment frame counter
c = (c + 1) % 5; // increment color counter
// Arrange to be called again in 250 milliseconds
// Save the timeout id so that we can stop this crazy thing.
timeout = setTimeout("change_one_frame()", 250);
}
</SCRIPT>
</HEAD>
<!-- start the frame animation when the document is fully loaded -->
<BODY onLoad="change_one_frame();">
<!-- Create a button to stop the animation with clearTimeout() -->
<!-- and close the window with close() -->
<FORM>
<INPUT TYPE="button" VALUE="Stop"
onClick="if (timeout) clearTimeout(timeout); if (!n.closed) n.close();">
</FORM>
<!-- O'Reilly Footer Begins Here -->
<center>
</center>
<!-- O'Reilly Footer Ends Here -->
</BODY>
</HTML>