color change

by **ahaykal** on Wed Sep 22, 2010 2:01 pm

Hello guys I am having trouble with changing the color according to the time!

Code: Select all: <html> <head> <SCRIPT type="text/javascript">      // From: http://www.webdeveloper.com/forum/showthread.php?t=235734 function IfZero(num) { return ((num <= 9) ? ("0" + num) : num); } function check24(hour) { return (hour >= 24) ? hour - 24 : hour; } function StatusDescription(HHMM) { var msg = "Market is Closed"; if ((HHMM >= '09:30') && (HHMM < '09:50')) { msg = "Opening Bell";} if ((HHMM >= '09:50') && (HHMM < '10:10')) { msg = "The Morning Reversal"; } if ((HHMM >= '10:10') && (HHMM < '10:25')) { msg = "Low Risk Trading"; } if ((HHMM >= '10:25') && (HHMM < '10:30')) { msg = "Decision Time"; } if ((HHMM >= '10:30') && (HHMM < '11:15')) { msg = "Final Move of the Morning"; } if ((HHMM >= '11:15') && (HHMM < '14:15')) { msg = "Go Eat Your Lunch!!";} if ((HHMM >= '14:15') && (HHMM < '15:00')) { msg = "Back to Business"; } if ((HHMM >= '15:00') && (HHMM < '15:10')) { msg = "It's GO Time"; } if ((HHMM >= '15:10') && (HHMM < '15:25')) { msg = "Use Caution & Stay with the Trend"; } if ((HHMM >= '15:30') && (HHMM < '14:00')) { msg = "Portfolio Re-balancing"; } if((HHMM >= '15:31' ) && (HHMM <= '15:59')) {msg = "Market is Closed(18 hours)";} if((HHMM >= '16:00' ) && (HHMM <= '16:59')) {msg = "Market is Closed(17 hours)";} if((HHMM >= '17:00' ) && (HHMM <= '17:59')) {msg = "Market is Closed(16 hours)";} if((HHMM >= '18:00' ) && (HHMM <= '18:59')) {msg = "Market is Closed(15 hours)";} if((HHMM >= '19:00' ) && (HHMM <= '19:59')) {msg = "Market is Closed(14 hours)";} if((HHMM >= '20:00' ) && (HHMM <= '20:59')) {msg = "Market is Closed(13 hours)";} if((HHMM >= '21:00' ) && (HHMM <= '21:59')) {msg = "Market is Closed(12 hours)";} if((HHMM >= '22:00' ) && (HHMM <= '22:59')) {msg = "Market is Closed(11 hours)";} if((HHMM >= '23:00' ) && (HHMM <= '23:59')) {msg = "Market is Closed(10 hours)";} if((HHMM >= '00:00' ) && (HHMM <= '00:59')) {msg = "Market is Closed(9 hours)";} if((HHMM >= '01:00' ) && (HHMM <= '01:59')) {msg = "Market is Closed(8 hours)";} if((HHMM >= '02:00' ) && (HHMM <= '02:59')) {msg = "Market is Closed(7 hours)";} if((HHMM >= '03:00' ) && (HHMM <= '03:59')) {msg = "Market is Closed(6 hours)";} if((HHMM >= '04:00' ) && (HHMM <= '04:59')) {msg = "Market is Closed(5 hours)";} if((HHMM >= '05:00' ) && (HHMM <= '05:59')) {msg = "Market is Closed(4 hours)";} if((HHMM >= '06:00' ) && (HHMM <= '06:59')) {msg = "Market is Closed(3 hours)";} if((HHMM >= '07:00' ) && (HHMM <= '07:59')) {msg = "Market is Closed(2 hours)";} if((HHMM >= '08:00' ) && (HHMM <= '08:59')) {msg = "Market is Closed(1 hours)";} return msg; } function $_(IDS) { return document.getElementById(IDS); } function GetTime() { var dt = new Date(); var def = dt.getTimezoneOffset()/60; var gmt = (dt.getHours() + def); document.clock.local.value = (IfZero(dt.getHours()) + ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds())); var ending = ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds()); var tmp = []; for (var i=0; i<24; i++) { tmp[i] = IfZero(check24(((gmt+i) > 24)?((gmt+i) - 24) :(gmt+i)))+ending; } document.clock._GMT.value = tmp[1]; $_('text0').value = StatusDescription(tmp[0]); // document.clock.rome.value = tmp[1]; $_('text1').value = StatusDescription(tmp[1]); // document.clock.Israel.value = tmp[2]; $_('text2').value = StatusDescription(tmp[2]); // document.clock.msw.value = tmp[3]; $_('text3').value = StatusDescription(tmp[3]); // document.clock.baku.value = tmp[4]; $_('text4').value = StatusDescription(tmp[4]); // document.clock.del.value = tmp[5]; $_('text5').value = StatusDescription(tmp[5]); // document.clock.dh.value = tmp[6]; $_('text6').value = StatusDescription(tmp[6]); // document.clock.kok.value = tmp[7]; $_('text7').value = StatusDescription(tmp[7]); // document.clock.ho.value = tmp[8]; $_('text8').value = StatusDescription(tmp[8]); document.clock.tky.value = tmp[9]; $_('text9').value = StatusDescription(tmp[9]); document.clock.sdn.value = tmp[10]; $_('text10').value = StatusDescription(tmp[10]); document.clock.nyk.value = tmp[20]; $_('text11').value = StatusDescription(tmp[20]); // document.clock.mag.value = tmp[11]; $_('text11').value = StatusDescription(tmp[11]); // document.clock.wll.value = tmp[12]; $_('text12').value = StatusDescription(tmp[12]); //document.clock.sam.value = tmp[13]; $_('text13').value = StatusDescription(tmp[13]); // document.clock.Hawaii.value = tmp[14]; $_('text14').value = StatusDescription(tmp[14]); // document.clock.alaska.value = tmp[15]; $_('text15').value = StatusDescription(tmp[15]); // document.clock.pacif.value = tmp[16]; $_('text16').value = StatusDescription(tmp[16]); // document.clock.mount.value = tmp[17]; $_('text17').value = StatusDescription(tmp[17]); // document.clock.center.value = tmp[18]; $_('text18').value = StatusDescription(tmp[18]); // document.clock.east.value = tmp[19]; $_('text19').value = StatusDescription(tmp[19]); // document.clock.atl.value = tmp[20]; $_('text20').value = StatusDescription(tmp[20]); // document.clock.bra.value = tmp[21]; $_('text21').value = StatusDescription(tmp[21]); // document.clock.mid.value = tmp[22]; $_('text22').value = StatusDescription(tmp[22]); // document.clock.azo.value = tmp[23]; $_('text23').value = StatusDescription(tmp[23]); //function changeBGC(color) // { //document.bgColor = color; //} //document.clock.leb.value = tmp[3]; //document.clock.text1.value = StatusDescription(tmp[3]); //document.clock.eniw.value = tmp[12]; // document.clock.text24.value = StatusDescription(tmp[12]); setTimeout("GetTime()", 1000); } </script> </head> <BODY onLoad="javascript:GetTime();"> <center> <form name="clock"> <strong>Local Time <input type="text" size="8" name="local" ></strong> <br> <p> <table border="0">   <tr> <td> London (GMT) </td> <td> <input type="text" size="8" name="_GMT"> </td> <td> Status: <INPUT id="text0" type="text" size="25"STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" > </tr>  <tr> <td> Tokyo (GMT +9) </td> <td> <input type="text" size="8" name="tky"> </td> <td> Status: <INPUT id="text9" type="text" size="25"STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: red;" > </tr> <tr> <td> Sydney (GMT +10) </td> <td> <input type="text" size="8" name="sdn"> </td> <td> Status: <INPUT id="text10" type="text" size="25"STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: red;" > </tr> <tr> <td> New York (GMT -7) </td> <td> <input type="text" size="8" name="nyk"> </td> <td> Status: <INPUT id="text11" type="text" size="25"STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: blue;" > </tr>  </form> </center> <noscript> Your browser either does not support JavaScript, or you have JavaScript turned off. </noscript> </body> </html>

What I basically want is that when the market is closed for the correseponding time the color of the input becomes red otherwise it becomes blue! can anyone help me with this issue please! thanks a lot!

by **HotNoob** on Wed Sep 22, 2010 4:32 pm

what exactly is the problem?

cause it seems to work fine, but i havn't really looked at the code...

by **ahaykal** on Wed Sep 22, 2010 4:54 pm

HotNoob wrote:what exactly is the problem?

cause it seems to work fine, but i havn't really looked at the code...

What I basically want is that when the statement "the market is closed" appears the color of the input becomes red otherwise it becomes blue !
In other words if the time is between 15:31 and 9:30 the input box will have a red background color at all other times the input color should be blue!
can anyone help me with this issue please! thanks a lot!

by **HotNoob** on Wed Sep 22, 2010 9:42 pm

to change the background color of an object in javascript you do:
object.style.backgroundColor = "color";

anyway, i quickly went through you code, fixed up a few html errors, and change the code to have A LOT less if statements

Code: Select all: <html> <head> <SCRIPT type="text/javascript">      // From: http://www.webdeveloper.com/forum/showthread.php?t=235734 function IfZero(num) { return ((num <= 9) ? ("0" + num) : num); } function check24(hour) { return (hour >= 24) ? hour - 24 : hour; } function StatusDescription(HHMM, hour, object) { var msg = "Market is Closed"; if ((HHMM >= '09:30') && (HHMM < '09:50')) { msg = "Opening Bell"; object.style.backgroundColor = "blue"; } else if ((HHMM >= '09:50') && (HHMM < '10:10')) { msg = "The Morning Reversal"; object.style.backgroundColor = "blue"; } else if ((HHMM >= '10:10') && (HHMM < '10:25')) { msg = "Low Risk Trading"; object.style.backgroundColor = "blue"; } else if ((HHMM >= '10:25') && (HHMM < '10:30')) { msg = "Decision Time"; object.style.backgroundColor = "blue"; } else if ((HHMM >= '10:30') && (HHMM < '11:15')) { msg = "Final Move of the Morning"; object.style.backgroundColor = "blue"; } else if ((HHMM >= '11:15') && (HHMM < '14:15')) { msg = "Go Eat Your Lunch!!"; object.style.backgroundColor = "blue"; } else if ((HHMM >= '14:15') && (HHMM < '15:00')) { msg = "Back to Business"; object.style.backgroundColor = "blue"; } else if ((HHMM >= '15:00') && (HHMM < '15:10')) { msg = "It's GO Time"; object.style.backgroundColor = "blue"; } else if ((HHMM >= '15:10') && (HHMM < '15:25')) { msg = "Use Caution & Stay with the Trend"; object.style.backgroundColor = "blue"; } else if ((HHMM >= '15:30') && (HHMM < '14:00')) { msg = "Portfolio Re-balancing"; object.style.backgroundColor = "blue"; } else if((HHMM >= '15:31' ) || (HHMM <= '9:30')) { object.style.backgroundColor = "red"; if(hour > 15) { msg = "Market is Closed (" + (hour - 9) + ")"; } else { msg = "Market is Closed (" + (-hour + 9) + ")"; } } return msg; } function $_(IDS) { return document.getElementById(IDS); } function GetTime() { var dt = new Date(); var def = dt.getTimezoneOffset()/60; var gmt = (dt.getHours() + def); document.clock.local.value = (IfZero(dt.getHours()) + ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds())); var ending = ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds()); var tmp = []; var hour = []; for (var i=0; i<24; i++) { tmp[i] = IfZero(check24(((gmt+i) > 24)?((gmt+i) - 24) :(gmt+i))) + ending; hour[i] = IfZero(check24(((gmt+i) > 24)?((gmt+i) - 24) :(gmt+i))); } document.clock._GMT.value = tmp[1]; $_('text0').value = StatusDescription(tmp[0],hour[0],$_('text0')); // document.clock.rome.value = tmp[1]; $_('text1').value = StatusDescription(tmp[1]); // document.clock.Israel.value = tmp[2]; $_('text2').value = StatusDescription(tmp[2]); // document.clock.msw.value = tmp[3]; $_('text3').value = StatusDescription(tmp[3]); // document.clock.baku.value = tmp[4]; $_('text4').value = StatusDescription(tmp[4]); // document.clock.del.value = tmp[5]; $_('text5').value = StatusDescription(tmp[5]); // document.clock.dh.value = tmp[6]; $_('text6').value = StatusDescription(tmp[6]); // document.clock.kok.value = tmp[7]; $_('text7').value = StatusDescription(tmp[7]); // document.clock.ho.value = tmp[8]; $_('text8').value = StatusDescription(tmp[8]); document.clock.tky.value = tmp[9]; $_('text9').value = StatusDescription(tmp[9],hour[9], $_('text9')); document.clock.sdn.value = tmp[10]; $_('text10').value = StatusDescription(tmp[10],hour[10], $_('text10')); document.clock.nyk.value = tmp[20]; $_('text11').value = StatusDescription(tmp[20],hour[20], $_('text11')); // document.clock.mag.value = tmp[11]; $_('text11').value = StatusDescription(tmp[11]); // document.clock.wll.value = tmp[12]; $_('text12').value = StatusDescription(tmp[12]); //document.clock.sam.value = tmp[13]; $_('text13').value = StatusDescription(tmp[13]); // document.clock.Hawaii.value = tmp[14]; $_('text14').value = StatusDescription(tmp[14]); // document.clock.alaska.value = tmp[15]; $_('text15').value = StatusDescription(tmp[15]); // document.clock.pacif.value = tmp[16]; $_('text16').value = StatusDescription(tmp[16]); // document.clock.mount.value = tmp[17]; $_('text17').value = StatusDescription(tmp[17]); // document.clock.center.value = tmp[18]; $_('text18').value = StatusDescription(tmp[18]); // document.clock.east.value = tmp[19]; $_('text19').value = StatusDescription(tmp[19]); // document.clock.atl.value = tmp[20]; $_('text20').value = StatusDescription(tmp[20]); // document.clock.bra.value = tmp[21]; $_('text21').value = StatusDescription(tmp[21]); // document.clock.mid.value = tmp[22]; $_('text22').value = StatusDescription(tmp[22]); // document.clock.azo.value = tmp[23]; $_('text23').value = StatusDescription(tmp[23]); //function changeBGC(color) // { //document.bgColor = color; //} //document.clock.leb.value = tmp[3]; //document.clock.text1.value = StatusDescription(tmp[3]); //document.clock.eniw.value = tmp[12]; // document.clock.text24.value = StatusDescription(tmp[12]); setTimeout("GetTime()", 1000); } </script> </head> <BODY onLoad="javascript:GetTime();"> <center> <form name="clock"> <strong>Local Time <input type="text" size="8" name="local" ></strong> <br> <p> <table border="0">   <tr> <td> London (GMT) </td> <td> <input type="text" size="8" name="_GMT"> </td> <td> Status: <INPUT id="text0" type="text" size="25"STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" ></td> </tr>  <tr> <td> Tokyo (GMT +9) </td> <td> <input type="text" size="8" name="tky"> </td> <td> Status: <INPUT id="text9" type="text" size="25"STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: red;" ></td> </tr> <tr> <td> Sydney (GMT +10) </td> <td> <input type="text" size="8" name="sdn"> </td> <td> Status: <INPUT id="text10" type="text" size="25"STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: red;" ></td> </tr> <tr> <td> New York (GMT -7) </td> <td> <input type="text" size="8" name="nyk"> </td> <td> Status: <INPUT id="text11" type="text" size="25"STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: blue;" ></td> </tr>  </table> </p> </form> </center> <noscript> Your browser either does not support JavaScript, or you have JavaScript turned off. </noscript> </body> </html>

i hope that helps

by **ahaykal** on Thu Sep 23, 2010 7:56 am

thanks that helped a lot

by **HotNoob** on Thu Sep 23, 2010 2:32 pm

your welcome.

by **iDad** on Thu Sep 23, 2010 6:04 pm

Good job HotNoob.well done!

color change

color change

Re: color change

Re: color change

Re: color change

Re: color change

Re: color change

Re: color change

Who is online