javascript - Changing Background Color according to time - Stack Overflow

admin2025-04-19 0

I'm coding a site with my friend, we are very new to coding. We would like our site to change color gradually every second according to the time of day. We have no clue where to even start, other than using a javascript function. Please help!!!! We have coded a clock into our site

function time(){
var today = new Date();
var h = today.getHours()
if (h>12) {h= h- "12"} ;
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clocky').innerHTML =
h + ":" + m + ":" + s;

var t = setTimeout(time, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}

This is as far as we have gotten other than general html for the clock and css. How would you code the changing background according to time?

function time(){
var today = new Date();
var h = today.getHours()
if (h>12) {h= h- "12"} ;
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clocky').innerHTML =
h + ":" + m + ":" + s;

var t = setTimeout(time, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}

This is as far as we have gotten other than general html for the clock and css. How would you code the changing background according to time?

Share Improve this question asked Feb 3, 2016 at 23:34 Kenzie 231 silver badge4 bronze badges

well, you could start with document.body.style.backgroundColor = "red"... – sg Commented Feb 3, 2016 at 23:36
do you want a random color each second or some sort of rainbow transition??? – Aziz Commented Feb 3, 2016 at 23:36
Sort of a rainbow transition, but with different shades of each color so they last a decent amount of time. The goal is to not repeat a color. – Kenzie Commented Feb 3, 2016 at 23:40
btw about the rainbow: stackoverflow./questions/27847222/… – Eugene Hauptmann Commented Feb 4, 2016 at 0:05

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

https://jsfiddle/f9b9sbr4/1/

function time(){
    var today = new Date();
    var h = today.getHours()
  if (h>12) {h= h- "12"} ;
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('clocky').innerHTML = h + ":" + m + ":" + s;
  var r = parseInt(s) * 1;
  var g = parseInt(s) * 3;
  var b = parseInt(s) * 5;
  document.body.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
  var t = setTimeout(time, 500);
}

function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}

time();

Well, now you'll need to make some decisions.

CSS lets you specify colors in the RGB format using numeric values from 0-255 (e.g. background-color: rgb(0,0,0) for a black background, and background-color: rgb(255,255,255) for a white background.

Assuming you want to use that method for specifying the color, you'll need to decide how you want the current time to map to those values. Once you have that figured out, all you'll need to do is set the background color style on the <html> element.

I know the question asks for a javscript solution, but the animation you are seeking is possible with a css-only solution and should be more performant.

I've written a more plete solution using a tiny bit of php to fetch daylight information for given lat/long coordinates and change the color of the page in real-time according to the time of day.

for a demo see here:
http://shawnfromportland./circadianCssWithPhp/

for the source check it out here:
https://github./shawnfromportland/circadianCssWithPhp

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745014531a280009.html

javascriptChanging Background Color according to timeStack Overflow

最新回复(0)