-1

How can I dynamically change the gradient in the body with js based on time of day?

Thanks

—

Img

http://a1.dspncdn.com/media/692x/da/dc/4e/dadc4ed5117d4a8cc582199bb3ac9c68.jpg

Pietro Spagnolo
  • 3
  • 1
  • 9
  • It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. – Paulie_D Sep 29 '15 at 11:39
  • You're absolutely right, I wanted to start a discussion about it. – Pietro Spagnolo Sep 29 '15 at 13:45
  • I will be clear from now on. Thank you. – Pietro Spagnolo Sep 29 '15 at 13:54
  • You might be interested in this: https://codepen.io/zessx/details/rDEAl – Fabien Snauwaert Jan 18 '19 at 17:17

2 Answers2

1

use the following code

HTML

<div id='time'>
</div>

JavaScript

var d = new Date();
var time = d.getHours();
var div=document.getElementById('time');
if (time < 12) 
{
   div.style.backgroundImage  ="url('morning image')";
}
if (time >= 12 && time < 3) 
{
    div.style.backgroundImage  ="url('afternoon image')";
}
if (time > 3) 
{
   div.style.backgroundImage  ="url('http://a1.dspncdn.com/media/692x/da/dc/4e/dadc4ed5117d4a8cc582199bb3ac9c68.jpg')";
}

CSS

#time{
    height:400px;
    width:400px;
}

refer this fiddle

Nagesh Sanika
  • 1,090
  • 1
  • 8
  • 16
0

It might help to have a look at https://stackoverflow.com/a/4358182/2588199 and then either set a different background or a css gradient string.

Something like:

var currentTime = new Date().getHours();
//Change here to set the hours to wish to change between
if (7 <= currentTime && currentTime < 20) {
    //place image or strng here
}else {
    //Place image or string here
}
Community
  • 1
  • 1
russell
  • 176
  • 1
  • 12
  • I have found similar solutions. I was thinking of something more precise and dynamic. I can not run this code on my pc http://jsfiddle.net/hakuagej/ – Pietro Spagnolo Sep 29 '15 at 13:50
  • Would the colours you want to display be predefined say for each hour? That way the colours wont be random? – russell Sep 29 '15 at 14:00
  • Here I updated your code to allow you to select the colour in a way you need http://jsfiddle.net/hakuagej/1/ If you wish to use a css gradient this may be helpful http://www.colorzilla.com/gradient-editor/ – russell Sep 29 '15 at 14:04
  • I mean: from dark colors for the night to light colors for the day – Pietro Spagnolo Sep 29 '15 at 14:05
  • without creating brackets hours, as an animation http://www.gradient-animator.com – Pietro Spagnolo Sep 29 '15 at 14:07
  • May need refining to ensure correct colour types but this should do the trick http://jsfiddle.net/hakuagej/2/ just need to alter the dayStart and end number. – russell Sep 29 '15 at 14:16
  • Thanks for the support. In fact, rather than think about the random, the idea is closer to this, the color should follow a real clock http://tympanus.net/Tutorials/jQuerySceneryAnimation/ – Pietro Spagnolo Sep 29 '15 at 14:26
  • So it should mimic the colours of a real day dark -> light blue -> brighter blue -> then fade out to dark again. Whilst the user is browsing the site. – russell Sep 29 '15 at 14:41