PDA

View Full Version : How to change table cell background color based on time of day ?



balki
08-19-2017, 12:44 PM
Hello,
I can not write the javascript code correctly.
Can someone help me, please :)
The code is here: http://jsfiddle.net/sgehkvkz/

styxlawyer
08-19-2017, 01:04 PM
All your "if" statements are nested, so if the first one fails none of the others are even tested. You should be using:



if (first_test) {
first_action;
}
else if (second_test) {
second_action;
}
.
.
.
else
{
default_action;
}

balki
08-19-2017, 03:24 PM
Yes, I use nested if to accelerate time and reduce processor load.

You offer this: https://jsfiddle.net/stzw46wq/ but I'm wrong somewhere.:confused:

styxlawyer
08-19-2017, 07:39 PM
Yes, I use nested if to accelerate time and reduce processor load.

.
.


That code is still the same. It's your choice of course but, as I pointed out before, nested "if" statements will all fail if the first one fails.

styxlawyer
08-20-2017, 12:26 PM
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.



<!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;">&nbsp;</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
09-06-2017, 05:32 AM
I'm still wrong somewhere.

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");}

I tried a new way, but it did not work either:confused::

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");}


}

styxlawyer
09-06-2017, 08:41 PM
Yes, you have an error in your first "else if" test:

This:



.
else if (hourCompare = 8 && minsCompare >= 10 && minsCompare < 20)
{$('#r2').css("background-color", "#ceeca5");}
.


should be:



.
else if (hourCompare == 8 && minsCompare >= 10 && minsCompare < 20)
{$('#r2').css("background-color", "#ceeca5");}
.

balki
09-08-2017, 06:34 PM
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/

jscheuer1
09-09-2017, 01:44 AM
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:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table id="thetable">
<tr>
<td>&nbsp;</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>

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:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table id="thetable">
<tr>
<td>&nbsp;</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>

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:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table id="thetable">
<tr>
<td>&nbsp;</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>

Same as the last block, just more efficient:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table id="thetable">
<tr>
<td>&nbsp;</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>

jscheuer1
09-10-2017, 03:04 PM
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):


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table id="thetable">
<tr>
<td>&nbsp;</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>

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.

jscheuer1
09-11-2017, 05:12 AM
Played around with this even more. Think I'm finished now. This requires/uses only hours and minutes, and can have as many times as you want. Colors may be repeated later with different times. Times should be sequential and fit into/cover a 24 hour period:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table id="thetable">
<tr>
<td>&nbsp;</td>
</tr>
</table>
<script>
(function(){ // anonymous function wrapper keeps variable and function names out of the global scope
var timespans = { // use as many timespans as you want, colors can repeat later with different times, if you run out of letters, you can start over with a1, b1, etc.
a: {bgc: "red", start: '0:00', end: '10:05'}, // {bgc: "color", start: 'hour:minute', end: 'hour:minute'}
b: {bgc: "blue", start: '10:06', end: '18:15'},
c: {bgc: "#00ff00", start: '18:16', end: '23:01'},
d: {bgc: "lightblue", start: '23:02', end: '23:59'}
}, c, units = ['Hours', 'Minutes', 'Seconds'], the_table = document.getElementById('thetable').style;
for (c in timespans) {if(timespans[c].bgc){timespans[c].start += ':00'; timespans[c].end += ':59';}} // automatically add seconds to start and end times
function tomillis(cdtime){ // converts start and end colon delimited times to milliseconds since 1970/01/01
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; // current milliseconds since 1970/01/01, var to later hold the current end time
for (c in timespans) { // check each timespan to find a match
if(timespans[c].bgc && (lim = tomillis(timespans[c].end)) >= curtime && curtime >= tomillis(timespans[c].start)){
the_table.backgroundColor = timespans[c].bgc; // if found, set table bg to timespan's bgc
setTimeout(changetablebg, lim - curtime + 1500); // run changetablebg one and a half seconds after current end time
break;
}
}
}
changetablebg(); // initial run of the changetablebg function
})(); // end anonymous function wrapper
</script>
</body>
</html>

Ooops, I may have spoken too soon. I just got an idea for an improvement, but will have to mess with it later. But this should do for now.

styxlawyer
09-11-2017, 07:11 AM
Looking good John except that you are only using a single cell table. The OP wanted different cells of a multi-celled table to change background colours at certain times, so that needs to be built into your "timespans" array. Also, when a cell changes colour all the other cells should revert to their original background colour as per my origin simple demo.

jscheuer1
09-11-2017, 05:33 PM
Looking good John except that you are only using a single cell table. The OP wanted different cells of a multi-celled table to change background colours at certain times, so that needs to be built into your "timespans" array. Also, when a cell changes colour all the other cells should revert to their original background colour as per my origin simple demo.

"timespans" is an object, but I think an array would be better. I've been playing around with both.

Like I said, I didn't read the thread. That (targeting td's sequentially with the rest of the td's reverting) would be simple to add. I'll do it soon, thanks. But what's this supposed to look like? A Christmas tree? (Just kidding about the tree, I think, would be a funny looking Christmas tree, right?) How often do the colors change? Do they indicate anything, or are they just for show?

jscheuer1
09-11-2017, 06:20 PM
OK, think I've got all that covered:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#td0 {background-color: orange;}
#td1 {background-color: brown;}
#td2 {background-color: black;}
#td3 {background-color: purple;}
</style>
</head>
<body>
<table id="thetable">
<tr>
<td id="td0">&nbsp;</td><td id="td1">&nbsp;</td><td id="td2">&nbsp;</td><td id="td3">&nbsp;</td>
</tr>
</table>
<script>
"use strict";
(function(){ // anonymous function wrapper keeps variable and function names out of the global scope
var timespans = [ // use as many timespans as you want, colors can repeat later with different times and/or td num
{td: 1, bgc: "red", start: '0:00', end: '10:05'}, // {td: 0 index td num, bgc: "color", start: 'hour:minute', end: 'hour:minute'}
{td: 3, bgc: "blue", start: '10:06', end: '18:15'},
{td: 2, bgc: "#00ff00", start: '18:16', end: '23:01'},
{td: 0, bgc: "lightblue", start: '23:02', end: '23:59'}
], c, units = ['Hours', 'Minutes', 'Seconds'], the_tds = document.getElementById('thetable').getElementsByTagName('td'), curtd;
for (c in timespans) {if(timespans[c].bgc){timespans[c].start += ':00'; timespans[c].end += ':59';}} // automatically add seconds to start and end times
function tomillis(cdtime){ // converts start and end colon delimited times to milliseconds since 1970/01/01
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; // current milliseconds since 1970/01/01, var to later hold the current end time
for (c in timespans) { // check each timespan to find a match
if(timespans[c].bgc && (lim = tomillis(timespans[c].end)) >= curtime && curtime >= tomillis(timespans[c].start)){
if(curtd){curtd.backgroundColor = '';}
curtd = the_tds[timespans[c].td].style;
curtd.backgroundColor = timespans[c].bgc; // if found, set table bg to timespan's bgc
setTimeout(changetablebg, lim - curtime + 1500); // run changetablebg one and a half seconds after current end time
break;
}
}
}
changetablebg(); // initial run of the changetablebg function
})(); // end anonymous function wrapper
</script>
</body>
</html>

Might still need tweaking and/or benefit from improvements. Also, still curious about my previous questions -


. . . what's this supposed to look like? A Christmas tree? (Just kidding about the tree, I think, would be a funny looking Christmas tree, right?) How often do the colors change? Do they indicate anything, or are they just for show?

jscheuer1
09-11-2017, 11:37 PM
And now, I think the final tweak (I've tried to comment the code adequately, but if anyone has any questions about any particular part of it, feel free to ask):


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/* set each td's default bg color in a stylesheet by id, or use a class or descendant selector if you want them all to default to the same bg color */
#td0 {background-color: orange;}
#td1 {background-color: brown;}
#td2 {background-color: black;}
#td3 {background-color: purple;}
</style>
</head>
<body>
<table id="thetable">
<tr>
<td id="td0">&nbsp;</td><td id="td1">&nbsp;</td><td id="td2">&nbsp;</td><td id="td3">&nbsp;</td>
</tr>
</table>
<script>
"use strict";
(function(){ // anonymous function wrapper keeps variable and function names out of the global scope
var timespans = [ // use as many timespans as you want, colors can repeat later with different times and/or td num, times should be sequential
{td: 1, bgc: "red", start: '0:00', end: '10:05'}, // {td: 0 index td num, bgc: "color", start: 'hour:minute', end: 'hour:minute'}
{td: 3, bgc: "blue", start: '10:06', end: '18:15'},
{td: 2, bgc: "#00ff00", start: '18:16', end: '23:01'},
{td: 0, bgc: "lightblue", start: '23:02', end: '23:59'}
], c = timespans.length, tsl = c, units = ['Hours', 'Minutes', 'Seconds'], // get timespans length, establish units for 'tomillis' conversion
the_tds = document.getElementById('thetable').getElementsByTagName('td'), curtd = {}; // reference the td's, establish var for current td (for later use)
while (--c > -1) {timespans[c].start += ':00'; timespans[c].end += ':59';} // add seconds to start and end times for more precise processing
function tomillis(cdtime){ // converts start and end colon delimited times to milliseconds since 1970/01/01
cdtime = cdtime.split(':');
var d = new Date(), t = -1;
while(++t < 3){ d['set' + units[t]](+cdtime[t]);}
return d.getTime();
}
function changetablebg(){
var curtime = new Date().getTime(), lim; // current milliseconds since 1970/01/01, var to later hold the current end time
while (++c < tsl) { // check timespan to find a match
if((lim = tomillis(timespans[c].end)) >= curtime && curtime >= tomillis(timespans[c].start)){
curtd.backgroundColor = ''; // revert previous td (if any) bg to it's default as set in style section
curtd = the_tds[timespans[c].td].style; // save refernece to current td
curtd.backgroundColor = timespans[c].bgc; // if found, set corresponding td's bg color to timespan's bgc
c = -1; // reset c for next run through
setTimeout(changetablebg, lim - curtime + 1500); // run again at one and a half seconds after lim (current end time)
break; // we've got a match, stop processing
}
}
}
changetablebg(); // initial run of the changetablebg function
})(); // end anonymous function wrapper
</script>
</body>
</html>

styxlawyer
09-12-2017, 08:29 AM
That looks good, John.

I'm not sure what the OP's intention is as he/she seems to more of a lurker only coming back to the thread very occasionally.

balki
09-18-2017, 03:42 PM
Thank you very much for the help! :D
I am still adjusting the code using the information provided in the topic.
When I finish the code I will write again.