根据时间改变背景颜色

Question

我正在和朋友一起编写网站代码，我们对代码编写还很陌生。我们希望我们的网站根据一天中的时间每秒逐渐改变颜色。我们不知道从哪里开始，除了使用 javascript 函数。请帮忙！！！！我们已将时钟编码到我们的网站

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

除了时钟和 css 的一般 html 之外，这是我们目前所了解的。你会如何根据时间对不断变化的背景进行编码？

Answer 1

嗯，现在你需要做出一些决定。

CSS 允许您使用 0-255 之间的数值指定 RGB 格式的颜色（例如，background-color: rgb(0,0,0) 表示黑色背景，background-color: rgb(255,255,255) 表示白色背景。

假设您要使用该方法指定颜色，您需要决定当前时间如何映射到这些值。一旦你弄清楚了，你需要做的就是在 <html> 元素上设置背景颜色样式。

Answer 2

https://jsfiddle.net/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();

Answer 3

我知道这个问题要求一个 javscript 解决方案，但您正在寻找的动画可以通过 css-only 解决方案实现，并且性能应该更高。

我已经使用一小部分 php 编写了一个更完整的解决方案来获取给定 lat/long 坐标的日光信息并根据时间实时更改页面颜色的一天。

有关演示，请参见此处：
http://shawnfromportland.com/circadianCssWithPhp/

来源请在此处查看：
https://github.com/shawnfromportland/circadianCssWithPhp

根据时间改变背景颜色

Changing Background Color according to time

html

javascript

css

colors

background-color