javascript - Cambiare lo stile CSS in base all'orario reale di giorno e notte

Ho seguito questo tutorial. Cambia l'animazione dopo 30 minuti da giorno a notte ed è molto carino, mi piace, ma stavo pensando a come fare in modo che questo cambiamento avvenga nell'orario reale, così funzionerebbe in tempo reale e cambierebbe giorno e notte a seconda dell'orario reale. Non so come fare, qualcuno può aiutarmi per favore? Ecco il codice :-

HTML

<div id="sky"></div>
<div id="sun_yellow"></div>
<div id="sun_red"></div>
<div id="clouds"></div>
<div id="ground"></div>
<div id="night"></div>
<div id="stars"></div>
<div id="sstar"></div>
<div id="moon"></div>

CSS

body{
    overflow:hidden;
}
#clouds, #sky, #night, #stars{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
}
#sky{
    background:#fff url(../images/sky.png) repeat-x top left;
    z-index:1;
}
#sun_yellow{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun.png) no-repeat center center;
    z-index:2;
}
#sun_red{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun2.png) no-repeat center center;
    z-index:2;
    opacity:0;
}
#clouds{
    background:transparent url(../images/clouds.png) repeat-x top left;
    z-index:3;
}
#ground{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:232px;
    background:transparent url(../images/ground.png) repeat-x bottom center;
    z-index:3;
}
#night{
    background-color:#000;
    z-index:4;
    opacity:0;
}
#stars{
    bottom:200px;
    background:transparent url(../images/stars.png) repeat bottom center;
    z-index:5;
    opacity:0;
}
#sstar{
    position:absolute;
    left:40%;
    top:10%;
    width:126px;
    height:80px;
    background:transparent url(../images/shootingstar.png) no-repeat 80px -200px;
    z-index:5;
    opacity:0;
}
#moon{
    position:absolute;
    left:45%;
    top:60%;
    width:168px;
    height:168px;
    background:transparent url(../images/moon.png) no-repeat center center;
    z-index:6;
    opacity:0;
}

JS

$(function() {
   $('#sun_yellow').animate({'top':'96%','opacity':0.4}, 12000,function(){
       $('#stars').animate({'opacity':1}, 5000,function(){
            $('#moon').animate({'top':'30%','opacity':1}, 5000, function(){
                $('#sstar').animate({'opacity':1}, 300);
                $('#sstar').animate({
                    'backgroundPosition':'0px 0px','top':'15%', 'opacity':0
                }, 500);
            });
       });
   });
   $('#sun_red').animate({'top':'96%','opacity':0.8}, 12000);
   $('#sky').animate({'backgroundColor':'#4F0030'}, 18000);
   $('#clouds').animate({'backgroundPosition':'1000px 0px','opacity':0}, 30000);
   $('#night').animate({'opacity':0.8}, 20000);
});

Risposta n. 1

Dovrai compensare il tuo tempo in base all'orario attuale della macchina. Ho creato un piccolo esempio per te. Questo esempio mostra un'animazione su una finestra temporale di 10 secondi. Questa finestra può essere modificata aumentando time_window fino a un'intera giornata (1000 * 60 * 60 * 24).

Invece di usare le animazioni di base utilizza requestAnimationFrame e l'ora corrente. Questo ti dà il controllo diretto sull'animazione e sul tempo. Impostare animazioni CSS potrebbe essere soggetto alla velocità della CPU e/o a animazioni disabilitate quando una scheda non è attiva.

var running = true;
var time_window = 1000 * 60 * 0.1;

function runDay() {
  if (running) {
    var now = Date.now() % time_window;
    var offset = Math.sin(now * (2 * Math.PI / time_window)) * 25 + 35;
    $('.sun').css('top', offset + '%');
  }
  window.requestAnimationFrame(runDay);
}

runDay();

body {
  background-color: #55b;
}
.earth {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50%;
  background-color: #5b5;
  z-index: 3;
}
.sun {
  position: absolute;
  background-color: #bb5;
  left: 10%;
  top: 10%;
  width: 10vmin;
  height: 10vmin;
  border-radius: 10vmin;
  z-index: 2;
  s
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="earth"></div>
<div class="sun"></div>

Prestazione

Questo esempio utilizza il metodo requestAnimationFrame. Tuttavia, se devi muovere un sole in 24 ore, eseguire a 60 fps potrebbe essere un po' eccessivo. Per risparmiare sulle risorse del proprio dispositivo potresti voler eseguire aggiornamenti meno frequenti. Questo può essere ottenuto usando il metodo setTimeout e la stessa chiamata ricorsiva mostrata nello snippet.

function doRecursive() {
    setTimeout(doRecursive, 1000); // run every second
}
doRecursive();

Vedere il sole non si muove così velocemente. Probabilmente le persone non noteranno alcun balbettio.

Risposta n. 2

un possibile approccio è avere un div wrapper per il tuo contenuto

<div id="idDayTime" class="day">
   .... content of the page ...
</div>

e poi devi avere qualcosa del genere nel tuo javascript

setInterval(function(){ 
   ... check time of day ...
   ... assign corresponding css class to the idDayTime div ...
}, 60000);

Fondamentalmente dovrebbe controllare l'ora ogni ora e cambiare il tema.

Il tuo CSS dovrebbe includere definizioni di stile racchiuse:

.day{
  .content{
  };
};
.evening{
  .content{
  };
};

E, ovviamente, non dimenticare di impostare il tema una volta che entri nella pagina.