Javascript - 根据一天中的时间更改渐变色体

Question

如何根据时间动态更改身体中的渐变？

由于

-

图

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

Answer 1

使用以下代码

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

参考此fiddle

Answer 2

查看https://stackoverflow.com/a/4358182/2588199然后设置不同的背景或css渐变字符串可能会有所帮助。

类似的东西：

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
}