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

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

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(){ // 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

Originally Posted by styxlawyer

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:

Code:

<!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 -

Originally Posted by jscheuer1

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

Code:

<!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!

I am still adjusting the code using the information provided in the topic.
When I finish the code I will write again.

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

Thread Tools

Search Thread

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

The Following 2 Users Say 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:

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