matthewst Posted July 28, 2007 Share Posted July 28, 2007 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> Quote Link to comment Share on other sites More sharing options...
tibberous Posted July 28, 2007 Share Posted July 28, 2007 If I show you, do you promise to never use it? Quote Link to comment Share on other sites More sharing options...
teng84 Posted July 28, 2007 Share Posted July 28, 2007 If I show you, do you promise to never use it? then dont post it???? Quote Link to comment Share on other sites More sharing options...
tibberous Posted July 28, 2007 Share Posted July 28, 2007 <script> colors = new Array('black', 'red', 'green'); function annoyingEffect(tic){ tic %= colors.length; document.bgColor = colors[tic]; setTimeout("annoyingEffect("+(tic+1)+")", 2000); } </script> <body onload="annoyingEffect(0)"> </body> Quote Link to comment Share on other sites More sharing options...
matthewst Posted July 28, 2007 Author Share Posted July 28, 2007 thanks tibb! The page is for personal use. I like to workout using the "tabata protocal". The tabata is 20 seconds of intense work (pushups, punching bag, etc) followed by 10 seconds of rest. Repeat 7 more times. Rest 1 minute then start over with another exercise. The changing colors will let me know when to do what. The reason I want to use colors instead of audible alarms is so I can use my mobile phones browser(it doesn't have sound in the browser). So all I need to do is modify tibb's code to account for the tabata time formats. ////I hearby promise not to assult the internet with annoying unnecessary crap//// Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.