javascript - 如何使用 jQuery/jQueryUi 根据从日出到日落的时间更改背景颜色？

Question

我正在尝试将一项功能内置到我正在制作的天气应用程序中，其中背景颜色在日出和日落之间在浅蓝色和海军紫色之间缓慢过渡，反之亦然。下面是我的相关代码部分，您可以在此处查看整个元素:

http://codepen.io/stephepush/pen/pbWwog

var sun = "http://api.sunrise-sunset.org/json?lat=" + lat + "&lng=" + lon + "&date=today";
  $.getJSON(sun, function(sunData){
    var sunUp = sunData.results.sunrise;
    var sunDown = sunData.results.sunset;
    var sunStatus = sunData.status;
    var nowEpoch = (Date.now())(1000)

      $("body").animate({'background-color':'#56c1ff'},nowEpoch - ((sunDown)*(1000)), 'linear');`

Answer 1

从概念上讲，这是您的代码。我们从早晨的颜色 (#fff) 开始，经过一段时间后我们混合到晚上的颜色 (#000)。

不过有几件事。

首先，在您的代码中，您正在从日落中减去现在。你想反过来做。

其次，您正在从一个黎明(早晨)混合到第二个黎明(傍晚)。这可能非常微妙。您需要在中间混合一整天，否则您的背景将整天看起来都像黄昏。

var now = (new Date()).getTime();
var fakeMidnight = now + (30 * 1000);
var untilMidnight = (fakeMidnight - now);

console.log("it will become night over the next : " + (untilMidnight/ 1000) + " seconds.")
$("body").animate({'background-color':'#000'}, (fakeMidnight - now), 'linear')

body { background-color:#fff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>