javascript - Schimbă stilul CSS în funcție de ora reală a zilei și a nopții

Am urmat acest tutorial. Are o animație care se schimbă după 30 de minute între zi și noapte, e foarte frumos, îmi place, dar mă gândeam cum să fac această schimbare să fie în funcție de ora reală, astfel încât să funcționeze în timp real și să schimbe ziua și noaptea în funcție de ora reală. Nu știu cum să fac asta, mă poate ajuta cineva, vă rog, aici este codul:-

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

Răspuns #1

Va trebui să compensați sincronizarea cu timpul actual de pe mașină. Am făcut un mic exemplu pentru dumneavoastră. Acest exemplu arată o animație pe o fereastră de timp de 10 secunde. Această fereastră poate fi schimbată prin creșterea valorii time_window la o zi întreagă (1000 * 60 * 60 * 24).

În loc să folosească animațiile de bază, utilizează requestAnimationFrame și timpul curent. Aceasta îți oferă control direct asupra animației și al temporizării. Setarea animațiilor CSS poate fi influențată de viteza CPU și/sau animațiile pot fi dezactivate atunci când un tab nu este activ.

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>

Performanță

Acest exemplu utilizează metoda requestAnimationFrame. Totuși, dacă vrei să muți un soare pe parcursul a 24h, rularea la 60fps ar putea fi puțin exagerată. Pentru a fi mai ușor pentru dispozitiv, s-ar putea să vrei să rulezi mai puține actualizări. Acest lucru poate fi realizat folosind metoda setTimeout și aceeași apelare recursivă așa cum este arătat în fragment.

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

Observând soarele nu se mișcă atât de repede. Probabil că oamenii nu vor observa nicio bâlbă.

Răspuns #2

o abordare posibilă este să ai un div înfășurător pentru conținutul tău

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

și apoi trebuie să ai ceva de genul acesta în JavaScript-ul tău

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

Practic, ar trebui să verifice timpul la fiecare oră și să schimbe tema.

CSS-ul tău ar trebui să includă definiții de stil încapsulate:

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

Și, desigur, nu uita să setezi tema odată ce intri pe pagină.