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:

Code:

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.

**styxlawyer** · 08-19-2017, 07:39 PM

Originally Posted by balki

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.

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;">&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.

Code:

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

:

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

  
  }

**styxlawyer** · 09-06-2017, 08:41 PM

Yes, you have an error in your first "else if" test:

This:

Code:

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

should be:

Code:

.
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:

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>&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:

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>&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:

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>&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:

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>&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):

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>&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.

Thread: How to change table cell background color based on time of day ?

Thread Tools

Search Thread

How to change table cell background color based on time of day ?

The Following User Says Thank You to styxlawyer For This Useful Post:

The Following User Says Thank You to styxlawyer For This Useful Post:

The Following User Says Thank You to styxlawyer For This Useful Post:

The Following User Says Thank You to styxlawyer For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Similar Threads

Dynamically change row background color based on HEX,DEC Val in textfield

how to change text and background color same time

Cell background color change on mouseover

Change the background of an empty table cell when a link on other cell is clicked

controlling content w/display: table-cell, background-color

Bookmarks

Bookmarks

Posting Permissions