I have a page with buttons that allows users to select the background color of the page. What I need is for the background to automatically change at set intervals.
Example:
page loads bgcolor = blue
after 20 seconds (total) the bgcolor changes to green
after 30 seconds (10 seconds since the first change) the bgcolor changes to orange
after 50 seconds (20 seconds since the last change) the bgcolor changes to red
and so on and so on
<style><!--
.relative { position:relative; }
//--></style>
<style type="text/css">
.timer {
visibility: hidden;
text-align: center;
background: black;
font-family: Arial;
font-weight: bold;
border: 2px outset;
border-left: 2px outset darkgray;
border-top: 2px outset darkgray;
}
.timer_pad {
padding: 10px;
}
.digits {
margin-top: 15px;
color: chartreuse;
font-size: 30pt;
font-family: Verdana;
}
.title {
color: white;
}
.btn_cont {
margin-top: 20px;
}
.start, .pause, .resume {
margin-right: 5px;
}
</style>
<table id="CH_utimer1" class="timer">
<td class="timer_pad">
<div class="title">Count-up Timer</div>
<div id="CH_utimer1_digits" class="digits"></div>
<div class="btn_cont">
<input id="CH_utimer1_start" class="start"
type="button" value="Start" disabled="disabled" />
<input id="CH_utimer1_pause" class="pause"
type="button" value="Pause" disabled="disabled" />
<input id="CH_utimer1_resume" class="resume"
type="button" value="Resume" disabled="disabled" />
<input id="CH_utimer1_reset"
type="button" value="Reset" disabled="disabled" />
</div>
<script type="text/javascript" src="coolCount.js"></script>
</td>
</table>
<form><input type="button" Value="Click for Black" onClick=" document.bgColor='Black'"><input type="button" Value="Click for White" onClick="document.bgColor='White'"><input type="button" Value="Click for Green" onClick=" document.bgColor='green'"></form>
