Page 1 of 2 12 LastLast
Results 1 to 10 of 17

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

  1. #1
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

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

    Hello,
    I can not write the javascript code correctly.
    Can someone help me, please
    The code is here: http://jsfiddle.net/sgehkvkz/

  2. #2
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    425
    Thanks
    0
    Thanked 53 Times in 49 Posts

    Default

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

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

    balki (08-19-2017)

  4. #3
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    Yes, I use nested if to accelerate time and reduce processor load.

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

  5. #4
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    425
    Thanks
    0
    Thanked 53 Times in 49 Posts

    Default

    Quote Originally Posted by balki View Post
    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.

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

    balki (08-23-2017)

  7. #5
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    425
    Thanks
    0
    Thanked 53 Times in 49 Posts

    Default

    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>

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

    balki (08-23-2017)

  9. #6
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

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

  10. #7
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    425
    Thanks
    0
    Thanked 53 Times in 49 Posts

    Default

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

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

    balki (09-07-2017)

  12. #8
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    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/

  13. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,301
    Thanks
    76
    Thanked 3,409 Times in 3,370 Posts
    Blog Entries
    12

    Default

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

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

    balki (09-09-2017)

  15. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,301
    Thanks
    76
    Thanked 3,409 Times in 3,370 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    balki (09-18-2017)

Similar Threads

  1. Replies: 0
    Last Post: 02-10-2009, 04:52 PM
  2. how to change text and background color same time
    By ultimate-tester in forum JavaScript
    Replies: 3
    Last Post: 02-27-2008, 08:13 AM
  3. Cell background color change on mouseover
    By Jalpari in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-29-2007, 03:22 PM
  4. Replies: 2
    Last Post: 12-25-2005, 11:38 AM
  5. Replies: 2
    Last Post: 04-29-2005, 02:50 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •