Hello,
I can not write the javascript code correctly.
Can someone help me, please
The code is here: http://jsfiddle.net/sgehkvkz/
Hello,
I can not write the javascript code correctly.
Can someone help me, please
The code is here: http://jsfiddle.net/sgehkvkz/
All your "if" statements are nested, so if the first one fails none of the others are even tested. You should be using:
Code:if (first_test) { first_action; } else if (second_test) { second_action; } . . . else { default_action; }
balki (08-19-2017)
Yes, I use nested if to accelerate time and reduce processor load.
You offer this: https://jsfiddle.net/stzw46wq/ but I'm wrong somewhere.![]()
balki (08-23-2017)
Here's a working example. It doesn't use jQuery and changes the colours every 10 seconds. I leave it to you to adapt it.
Code:<!doctype html> <html lang="en"> <head> <title>Colour change on time interval</title> <script type="text/javascript"> checkUpdateColors = function() { var d = new Date(); var hour = d.getHours(); var mins = d.getMinutes(); var secs = d.getSeconds(); document.getElementById('currentTime').innerHTML = "Current time is: " + (("0" + hour).slice(-2)) + ":" + (("0" + mins).slice(-2)) + ":" + (("0" + secs).slice(-2)); if ((secs >= 0) && (secs < 10)) { document.getElementById('r6').style.backgroundColor = "white"; document.getElementById('r1').style.backgroundColor = "yellow"; } else if ((secs >= 10) && (secs < 20)) { document.getElementById('r1').style.backgroundColor = "white"; document.getElementById('r2').style.backgroundColor = "yellow"; } else if ((secs >= 20) && (secs < 30)) { document.getElementById('r2').style.backgroundColor = "white"; document.getElementById('r3').style.backgroundColor = "yellow"; } else if ((secs >= 30) && (secs < 40)) { document.getElementById('r3').style.backgroundColor = "white"; document.getElementById('r4').style.backgroundColor = "yellow"; } else if ((secs >= 40) && (secs < 50)) { document.getElementById('r4').style.backgroundColor = "white"; document.getElementById('r5').style.backgroundColor = "yellow"; } else { document.getElementById('r5').style.backgroundColor = "white"; document.getElementById('r6').style.backgroundColor = "yellow"; } }; </script> <style> table, th, td { color: black; background-color: white; text-align: center; border: 2px solid black; border-collapse: collapse; font-size: 16px; margin: auto; padding: 5px; } td{ width: 6em; } </style> </head> <body> <p id="currentTime" style="text-align:center;"> </p> <div class="table"> <table> <tr> <th colspan="6">Background Colours Change Every 10 Seconds</th> </tr> <tr> <td id="r1">0 - 9</td> <td id="r2">10 - 19</td> <td id="r3">20 - 29</td> <td id="r4">30 - 39</td> <td id="r5">40 - 49</td> <td id="r6">50 - 59</td> </tr> </table> </div> <script type="text/javascript"> window.onload = (function() { setInterval(function(){checkUpdateColors();}, 1000); }); </script> </body> </html>
balki (08-23-2017)
I'm still wrong somewhere.
I tried a new way, but it did not work eitherCode:if ((hourCompare == 7 && minsCompare >= 30) || (hourCompare == 8 && minsCompare < 10)) {$('#r1').css("background-color", "#ceeca5");} else if (hourCompare = 8 && minsCompare >= 10 && minsCompare < 20) {$('#r2').css("background-color", "#ceeca5");} else if ((hourCompare == 8 && minsCompare >= 20) || (hourCompare == 9 && minsCompare == 0)) {$('#r3').css("background-color", "#ceeca5");} else if (hourCompare == 9 && minsCompare >= 0 && minsCompare < 20) {$('#r4').css("background-color", "#ceeca5");} else if ((hourCompare == 9 && minsCompare >= 20) || (hourCompare == 10 && minsCompare == 0)) {$('#r5').css("background-color", "#ceeca5");} else if (hourCompare == 10 && minsCompare >= 0 && minsCompare < 10) {$('#r6').css("background-color", "#ceeca5");} else if (hourCompare == 10 && minsCompare >= 10 && minsCompare < 50) {$('#r7').css("background-color", "#ceeca5");} else if ((hourCompare == 10 && minsCompare >= 50) || (hourCompare == 11 && minsCompare == 0)) {$('#r8').css("background-color", "#ceeca5");} else if (hourCompare == 11 && minsCompare >= 0 && minsCompare < 40) {$('#r9').css("background-color", "#ceeca5");} else if (hourCompare == 11 && minsCompare >= 40 && minsCompare < 50) {$('#r10').css("background-color", "#ceeca5");} else if ((hourCompare == 11 && minsCompare >= 50) || (hourCompare == 12 && minsCompare < 30)) {$('#r11').css("background-color", "#ceeca5");} else if (hourCompare == 12 && minsCompare >= 30 && minsCompare < 40) {$('#r12').css("background-color", "#ceeca5");} else if ((hourCompare == 12 && minsCompare >= 40) || (hourCompare == 13 && minsCompare < 20)) {$('#r13').css("background-color", "#ceeca5");}:
Code:if ((hourCompare >= 7 && minsCompare >= 30) { if (hourCompare <= 8 && minsCompare < 10) {$('#r1').css("background-color", "#ceeca5");} else if (hourCompare == 8 && minsCompare < 20) {$('#r2').css("background-color", "#ceeca5");} else if ((hourCompare == 8 && minsCompare <= 59)) {$('#r3').css("background-color", "#ceeca5");} }
Yes, you have an error in your first "else if" test:
This:
should be:Code:. else if (hourCompare = 8 && minsCompare >= 10 && minsCompare < 20) {$('#r2').css("background-color", "#ceeca5");} .
Code:. else if (hourCompare == 8 && minsCompare >= 10 && minsCompare < 20) {$('#r2').css("background-color", "#ceeca5");} .
balki (09-07-2017)
Hello,
This does not solve the problem. I'm radically wrong in checking the time. Even an elementary example shows this: https://jsfiddle.net/wbs8s06p/
Not sure what this is about, just going by the title of the thread. But if that's a decent indication, this should work, though might need a little tweaking:
Note: You should be able to use hex or even RGB values for the colors as long as they're quoted like the named colors are in the above demo. If you need minutes and/or seconds, that can be easily worked out by using the .getTime() method in place of the .getHours() and stating or converting the start and end times to total milliseconds. Something like:Code:<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table id="thetable"> <tr> <td> </td> </tr> </table> <script> (function(){ var timespans = { "red": {start: 0, end: 12}, "blue": {start: 13, end: 18}, "pink": {start: 19, end: 24} }, chour = new Date().getHours(), c; for (c in timespans){ if(chour >= timespans[c].start && timespans[c].end >= chour){ document.getElementById('thetable').style.backgroundColor = c; break; } } })(); </script> </body> </html>
If you need this to update (should a new color come into time) while the person is on the page, you can run the function on a loop either by naming it or calling it recursively, whichever, then running it on a timeout or interval loop. I would suppose every one second would be enough, right? Might be a good idea also for those rare cases when someone might be caught between two colors:Code:<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table id="thetable"> <tr> <td> </td> </tr> </table> <script> (function(){ var timespans = { "red": {start: '0:00', end: '12:30'}, "blue": {start: '12:31', end: '18:15'}, "#00ff00": {start: '18:16', end: '24:00'} }, curtime = new Date().getTime(), c, units = ['Hours', 'Minutes', 'Seconds']; function tomillis(cdtime){ cdtime = cdtime.split(':'); var d = new Date(), l = cdtime.length, t = -1; while(++t < l){ d['set' + units[t]](+cdtime[t]); } return d.getTime(); } for (c in timespans){ if(curtime >= tomillis(timespans[c].start) && tomillis(timespans[c].end) >= curtime){ document.getElementById('thetable').style.backgroundColor = c; break; } } })(); </script> </body> </html>
Same as the last block, just more efficient:Code:<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table id="thetable"> <tr> <td> </td> </tr> </table> <script> function changetablebg(){ var timespans = { "red": {start: '0:00', end: '12:30'}, "blue": {start: '12:31', end: '18:15'}, "#00ff00": {start: '18:16', end: '23:01'}, "lightblue": {start: '23:02', end: '24:00'} }, curtime = new Date().getTime(), c, units = ['Hours', 'Minutes', 'Seconds']; function tomillis(cdtime){ cdtime = cdtime.split(':'); var d = new Date(), l = cdtime.length, t = -1; while(++t < l){ d['set' + units[t]](+cdtime[t]); } return d.getTime(); } for (c in timespans){ if(curtime >= tomillis(timespans[c].start) && tomillis(timespans[c].end) >= curtime){ document.getElementById('thetable').style.backgroundColor = c; break; } } setTimeout(changetablebg, 1000); } changetablebg(); </script> </body> </html>
Code:<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table id="thetable"> <tr> <td> </td> </tr> </table> <script> (function(){ var timespans = { "red": {start: '0:00', end: '12:30'}, "blue": {start: '12:31', end: '18:15'}, "#00ff00": {start: '18:16', end: '23:01'}, "lightblue": {start: '23:02', end: '24:00'} }, c, units = ['Hours', 'Minutes', 'Seconds'], the_table = document.getElementById('thetable').style; function tomillis(cdtime){ cdtime = cdtime.split(':'); var d = new Date(), l = cdtime.length, t = -1; while(++t < l){ d['set' + units[t]](+cdtime[t]); } return d.getTime(); } function changetablebg(){ var curtime = new Date().getTime(); for (c in timespans){ if(curtime >= tomillis(timespans[c].start) && tomillis(timespans[c].end) >= curtime){ the_table.backgroundColor = c; break; } } setTimeout(changetablebg, 1000); } changetablebg(); })(); </script> </body> </html>
Last edited by jscheuer1; 09-09-2017 at 04:19 AM. Reason: add fourth code block
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
balki (09-09-2017)
I've been playing around with this a little more, it seems to work and is even more efficient because it only times out to the next scheduled color (as opposed to looping, which browsers will do, but technically don't like):
But it might depend upon how frequently you want the color to change, if it's changing fairly rapidly, my last code block from my previous post might still be best.Code:<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table id="thetable"> <tr> <td> </td> </tr> </table> <script> "use strict"; (function(){ var timespans = { "red": {start: '0:00:00', end: '10:05:59'}, "blue": {start: '10:06:00', end: '18:15:59'}, "#00ff00": {start: '18:16:00', end: '23:01:59'}, "lightblue": {start: '23:02:00', end: '24:00:59'} }, c, units = ['Hours', 'Minutes', 'Seconds'], the_table = document.getElementById('thetable').style; function tomillis(cdtime){ cdtime = cdtime.split(':'); var d = new Date(), l = cdtime.length, t = -1; while(++t < l){ d['set' + units[t]](+cdtime[t]); } return d.getTime(); } function changetablebg(){ var curtime = new Date().getTime(), lim; for (c in timespans){ if((lim = tomillis(timespans[c].end)) >= curtime && curtime >= tomillis(timespans[c].start)){ the_table.backgroundColor = c; setTimeout(changetablebg, lim - curtime + 1500); break; } } } changetablebg(); })(); </script> </body> </html>
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
balki (09-18-2017)
Bookmarks