Wie ändere ich die Hintergrundfarbe basierend auf der Zeit von Sonnenaufgang bis Sonnenuntergang mit jQuery/jQueryUi?

Question

Ich versuche, ein Feature in eine Wetter-App zu integrieren, die ich mache, wo die Hintergrundfarbe langsam zwischen hellblau und einem marineblauen Violett zwischen Sonnenaufgang und Sonnenuntergang wechselt und umgekehrt. Teile meines Codes, die entsprechende Code ist unten ist, können Sie das gesamte Projekt hier ansehen:

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

Konzeptionell ist dies Ihr Code. Wir beginnen mit der Morgenfarbe (#fff) und über einen gewissen Zeitraum hinweg vermischen wir uns mit der Abendfarbe (# 000).

Ein paar Dinge obwohl.

Erstens, in Ihrem Code subtrahieren Sie jetzt von Sonnenuntergang. Du willst das anders herum machen.

Zweitens mischen Sie von einer Dämmerung (Morgen) zu einer zweiten Dämmerung (Abend). Dies ist wahrscheinlich sehr subtil. Sie brauchen eine Mischung, um den ganzen Tag in der Mitte oder Ihr Hintergrund wird den ganzen Tag wie Dämmerung aussehen.

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>