<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="genstyle.css" type="text/css" />
<title>Changes Its Own Color</title>
<script language="javascript">
/* This holds the body object. It is set by code at the bottom of
the page. */
var bod;
/* Change the color of the body, then arrange a new change
for some time later. */
function yellow()
{
bod.style.backgroundColor = 'yellow';
bod.style.color = 'brown';
window.status = 'Brown on Yellow';
window.setTimeout("red()", 1000);
}
function red()
{
bod.style.backgroundColor = 'red';
bod.style.color = 'green';
window.status = 'This green on red is really ugly';
window.setTimeout("blue()", 3000);
}
function blue()
{
bod.style.backgroundColor = 'blue';
bod.style.color = 'white';
window.status = 'The wite text is easy to see on blue';
window.setTimeout("green()", 1500);
}
function green()
{
bod.style.backgroundColor = 'green';
bod.style.color = 'yellow';
window.status = 'How green is my page! With yellow letters';
window.setTimeout("yellow()", 2500);
}
/* Start it out. */
window.setTimeout('yellow(this)', 2000);
</script>
</head>
<body id="bod">
<h1>Changes Its Own Color</h1>
<p>This page is <u>carefully designed</u> to
reach a <b>new level</b>
of tacky by changing color at various intervals.</p>
</p>
</body>
<script language="javascript">
/* This sets the value of the bod variable with the body object.
It has to come here, after the body exists, for getElementById
to work properly. */
bod = document.getElementById('bod');
</script>
</html>