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

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 2

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

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

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

Answer 3

我知道这个问题需要一个javscript解决方案，但是您正在寻找的动画只有使用css的解决方案才有可能，而且应该表现得更好。

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

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

有关源的信息，请在此处查看：
https://github.com/shawnfromportland/circadianCssWithPhp

根据时间更改背景颜色

3 个答案: