Javascript I'；我刚发现一个基于时间的背景变化，但可以'；我不会再重复了

最奇怪的是，每件事都能与document.body.style.background一起工作，所以我不明白为什么不能改变这个div的样式

代码如下：

var wrapper = document.getElementById("wrapper");

var showTime = function() {
    var time = new Date,
        hours = time.getHours().toString(),
        minutes = time.getMinutes().toString(),
        seconds = time.getSeconds().toString();


    if (hours < 10) {
        hours = "0" + hours;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }

    wrapper.style.background = "#" + hours + minutes + seconds;

}

setInterval(showTime, 1000);

var wrapper=document.getElementById（“wrapper”）；
var showTime=函数（）{
var时间=新日期，
小时=时间。getHours（）.toString（），
分钟=时间。getMinutes（）.toString（），
秒=时间。getSeconds（）.toString（）；
如果（小时<10）{
小时数=“0”+小时数；
}
如果（分钟<10）{
分钟=“0”+分钟；
}
如果（秒<10）{
秒=“0”+秒；
}
wrapper.style.background=“#”+小时+分钟+秒；
}
设置间隔（显示时间，1000）；

代码运行正常，但为了明确您对背景对象所做的操作，您可以明确地说“backgroundColor”

您可能会遇到的问题是，您每秒都在为背景设置一个十六进制颜色，但您不会注意到每秒都有任何剧烈的变化，因为这些颜色太相似了。您可以使用浏览器扩展来检测颜色，如： ColorZillas铬延伸

红色阴影每小时只修改一个数字，绿色阴影每分钟修改一个数字。蓝色变化最大，但仍然很难注意到差异，除非你在开始时进行屏幕截图，然后在大约15秒后再次进行屏幕截图

这也只利用了一小部分光谱，因为其数量不会超过60个十六进制，在小时数的情况下，也不会超过12或24个

如果你每秒钟都在寻找一个更大的变化，你可以计算出秒数，然后使用rgb或转换为十六进制。通过这种方式，您可以每秒更改3-4个阴影，而不是仅更改一个

例如：

var percentOfMin = seconds/60;
var blue = Math.round(255 * percentOfMin);

等等等等

style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";

---

这样一来，每秒钟的工作时间就相当于整个蓝色光谱的一部分，绿色为分钟，红色为小时。

最佳猜测：此代码位于包装器元素之前，因此当您将其分配给变量时，它还不存在。浏览器的错误控制台中是否有错误？请确保您的html实际上有一个id为wrapper的div。定义

wrapper

后，尝试使用

console.log（wrapper）

。你在控制台里看到你的div了吗？这是在页面加载包装中调用的还是在文档末尾调用的？可能是你的元素在js运行时不在页面上。对我来说很有用：但我同意@Juhana。如果你在元素之前有这个脚本，你会有麻烦的。@Juhana是正确的。事实上，我在一个快速html文件中尝试了你的js代码，效果很好，只要你在JSFIDLE中尝试了你的代码，效果就很好。你看不到颜色的变化，因为它是如此微妙的变化，正如@michaelgarner在下面所说的。