javascript - Zmień styl CSS w zależności od rzeczywistego czasu dnia i nocy

Śledzę ten samouczek. Ma on zmianę animacji po 30 minutach na dzień i noc, jest to bardzo ładne, podoba mi się, ale zastanawiałem się, jak sprawić, żeby ta zmiana odpowiadała rzeczywistemu czasowi dnia, tak aby działała w moim rzeczywistym czasie i zmieniała dzień i noc w zależności od rzeczywistego czasu. Nie wiem, jak to zrobić, czy ktoś może mi pomóc, proszę, tutaj jest kod :-

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

Odpowiedź #1

Będziesz musiał przesunąć swoje ustawienia czasowe o bieżący czas na maszynie. Przygotowałem dla ciebie mały przykład. Ten przykład pokazuje animację w ciągu 10 sekund. Ten okres można zmienić, zwiększając time_window do pełnego dnia (1000 * 60 * 60 * 24).

Zamiast używać podstawowych animacji, wykorzystuje requestAnimationFrame i bieżący czas. Daje to bezpośrednią kontrolę nad animacją i czasem jej trwania. Ustawienie animacji CSS może być uzależnione od prędkości procesora i/lub wyłączonych animacji, gdy karta nie jest aktywna.

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>

Wydajność

Ten przykład wykorzystuje metodę requestAnimationFrame. Jednak jeśli zamierzasz przesuwać słońce przez 24 godziny, uruchamianie w 60 klatkach na sekundę może być trochę przesadą. Aby oszczędzić urządzenie, możesz chcieć wykonywać mniej aktualizacji. Można to osiągnąć przy użyciu metody setTimeout i tej samej rekurencyjnej wywołania, jak pokazano w fragmencie.

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

Widzienie słońca nie porusza się tak szybko. Ludzie prawdopodobnie nie zauważą żadnego zacięcia.

Odpowiedź #2

jednym z możliwych podejść jest posiadanie otaczającego elementu div dla twojej zawartości

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

a potem musisz mieć coś takiego w swoim JavaScripcie

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

Zasadniczo powinien sprawdzać czas co godzinę i zmieniać motyw.

Twój CSS powinien zawierać opakowane definicje stylów:

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

I oczywiście, nie zapomnij ustawić motywu, gdy wejdziesz na stronę.