How to make the background color of a page change at a certain time of the day in Javascript?

Question

Ok, guys I'm back with another question. . .

So, this time I've created a cool html webpage that contains snowflakes falling in the background that I created with Javascript.

What I am wanting to is have the background color of the page change at certain times of the day. For example: from 4am - 11pm, it'd be a lightblue color, from 11pm-6pm it'd be a little darker blue, from 6pm-9pm, it'd be a really dark blue, and finally from 9pm-4am, it'd be black.

Here is the code, if it helps any:

window.onload = function(){
 //create canvas
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 
 //set canvas fullscreen
 var W = window.innerWidth;
 var H = window.innerHeight;
 canvas.height = H;
 canvas.width = W;
 
 //generate snowflakes and atts
 var mf = 100; //max flakes
 var flakes = [];

 
 //loop through empty flakes and apply atts
for(var i = 0; i < mf; i++){
  flakes.push({
   x: Math.random()*W, //set width of flake to random nr between 0 and 1 * width of screen
   y: Math.random()*H, //set height of flake to random nr between 0 and 1 * height of screen
   r: Math.random()*5+2, //set radius between 2 and 5
   d: Math.random() + 1
  })

 }


 //draw flakes
 function drawFlakes(){
  ctx.clearRect(0, 0, W, H);
  ctx.fillStyle = "White";
  ctx.beginPath();
  for(var i = 0; i < mf; i++){
   var f = flakes[i];
   ctx.moveTo(f.x, f.y);
   ctx.arc(f.x, f.y, f.r, 0, Math.PI*2, true);
  }
  ctx.fill();
  moveFlakes();
 }
 var angle = 0;
 //move flakes
 function moveFlakes(){
  angle += 0.01;
  for(var i = 0; i < mf; i++){
   var f = flakes[i];
   f.y += Math.pow(f.d, 2) + 1;
   f.x += Math.cos(angle)*2;
   
   if(f.y > H){
    flakes[i] = {x: Math.random()*W, y: 0, r: f.r, d: f.d};
   }
  }
 }
 
 setInterval(drawFlakes, 25);
}

body {
 background-color: lightSeaGreen;
 z-index: -9999;
}

<!DOCTYPE html>
<html>
 <head>
  <script src="JsSnow.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body id="myBody">
  <canvas id="myCanvas"></canvas>
 </body>
</html>

I've tried many things using the getHours(), but none have worked!!!

Make a new function which sets the background color on init. In this function use someway to find the current time. Make an if - if else - else construction to apply the background color. Something like this? — Lars Mertens, Jul 28 '16 at 20:24
Please look at this ans(http://stackoverflow.com/questions/4455282/call-a-javascript-function-at-a-specific-time-of-day) — , Jul 28 '16 at 20:25
You haven't included any of your attempts to do the task, it would be easier to point out the right direction if you did. — mcfedr, Jul 28 '16 at 21:02

score 3 · Accepted Answer · answered Jul 28 '16 at 20:25

I have changed your function to get the current Hours in the day (0-24) and set the background accordingly. Hopefully this helps you find your answer.

window.onload = function(){
        var hour = (new Date()).getHours(); // get the current hours (0-24)
        var bg = document.getElementById('myBody'); // grab the bg obj
        if (hour > 10){ // if its past 10am
          bg.style.backgroundColor = 'red'; // set the bg color
        } else if (hour > 14){ // if its past 2pm
          bg.style.backgroundColor = 'blue';
        }
    
 //create canvas
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");
 
 //set canvas fullscreen
 var W = window.innerWidth;
 var H = window.innerHeight;
 canvas.height = H;
 canvas.width = W;
 
 //generate snowflakes and atts
 var mf = 100; //max flakes
 var flakes = [];

 
 //loop through empty flakes and apply atts
for(var i = 0; i < mf; i++){
  flakes.push({
   x: Math.random()*W, //set width of flake to random nr between 0 and 1 * width of screen
   y: Math.random()*H, //set height of flake to random nr between 0 and 1 * height of screen
   r: Math.random()*5+2, //set radius between 2 and 5
   d: Math.random() + 1
  })

 }


 //draw flakes
 function drawFlakes(){
  ctx.clearRect(0, 0, W, H);
  ctx.fillStyle = "White";
  ctx.beginPath();
  for(var i = 0; i < mf; i++){
   var f = flakes[i];
   ctx.moveTo(f.x, f.y);
   ctx.arc(f.x, f.y, f.r, 0, Math.PI*2, true);
  }
  ctx.fill();
  moveFlakes();
 }
 var angle = 0;
 //move flakes
 function moveFlakes(){
  angle += 0.01;
  for(var i = 0; i < mf; i++){
   var f = flakes[i];
   f.y += Math.pow(f.d, 2) + 1;
   f.x += Math.cos(angle)*2;
   
   if(f.y > H){
    flakes[i] = {x: Math.random()*W, y: 0, r: f.r, d: f.d};
   }
  }
 }
 
 setInterval(drawFlakes, 25);
}

body {
 background-color: lightSeaGreen;
 z-index: -9999;
}

<!DOCTYPE html>
<html>
 <head>
  <script src="JsSnow.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body id="myBody">
  <canvas id="myCanvas"></canvas>
 </body>
</html>

Thank you!!! BTW, sorry about the earlier comment that I deleted. . . I misread your solution ;) — Brett Carwile, Jul 29 '16 at 14:47

score 1 · Answer 2 · answered Jul 28 '16 at 20:24

something like this should work:

var time = new Date().getHours()

var opt = [
  'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'red'
]

document.querySelector('body').style.background = opt[time-1]

carelessjoker · Answer 3 · 2016-07-28T20:46:05.133

1

Adding this block to javascript should do the work.Gets the hour of the day and assigns background color accordingly.

  var date = new Date();
  var hours= date.getHours();
  if(hours > 4 && hours < 11){
   document.body.style.backgroundColor = "#7EC0EE";
  }else if (hours > 11 && hours < 17){
   document.body.style.backgroundColor = "#7e9cee";
  }else if(hours > 17 && hours < 21){
   document.body.style.backgroundColor = "#0d41d0";
  }else{
   document.body.style.backgroundColor = "#030815";
  }

edited Jul 28 '16 at 20:46

answered Jul 28 '16 at 20:40

carelessjoker

11
2

You should really add some explanation as to why this code should work - you can also add comments in the code itself - in its current form, it does not provide any explanation which can help the rest of the community to understand what you did to solve/answer the question. – ishmaelMakitla Jul 28 '16 at 20:43
Thanks for advise. Was submitting my first answer. – carelessjoker Jul 28 '16 at 20:49
Your answer does work. . . however, be sure to add an explanation next time!! Thanks!!! – Brett Carwile Jul 28 '16 at 22:40

score -1 · Answer 4 · answered Jul 28 '16 at 20:26

-1

Just have a separate function that runs every minute and change background color as needed

setInterval(()=>{
  //get color from time of day
  document.querySelector('body').style.background = color;
}, 60000);

answered Jul 28 '16 at 20:26

r0dney

735
2
5
16

How to make the background color of a page change at a certain time of the day in Javascript?

4 Answers4