javascript - Gerçek gündüz ve gece zamanına bağlı olarak css stilini değiştirme

Bu eğitimi takip ediyordum. 30 dakika sonra animasyonun gündüzden geceye değişmesi çok güzel, hoşuma gitti ama bunu gerçek gün saatine göre nasıl yapabileceğimi düşünüyordum, böylece gerçek zamanımda çalışır ve gündüz ve geceyi gerçek zamanın gündüz ve gecesine göre değiştirir. Bunu nasıl yapacağımı bilmiyorum, biri bana yardım edebilir mi lütfen? İşte 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);
});

Cevap #1

Zamanlamanızı makinedeki mevcut saate göre ayarlamanız gerekecek. Sizin için küçük bir örnek hazırladım. Bu örnek, 10 saniyelik bir zaman penceresi üzerinde bir animasyon gösteriyor. Bu pencere, time_window değerini bir tam gün (1000 * 60 * 60 * 24) olacak şekilde artırarak değiştirilebilir.

Temel animasyonları kullanmak yerine requestAnimationFrame ve mevcut zamanı kullanır. Bu, animasyon ve zamanlama üzerinde doğrudan kontrol sağlar. CSS animasyonlarının ayarlanması CPU hızı ve/veya sekme etkin olmadığında devre dışı bırakılan animasyonlardan etkilenebilir.

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>

Performans

Bu örnek requestAnimationFrame yöntemini kullanıyor. Ancak eğer 24 saat boyunca bir güneşi hareket ettirecekseniz, 60 fps çalıştırmak biraz fazla olabilir. Cihazınızı yormamak için daha az güncelleme çalıştırmak isteyebilirsiniz. Bu, setTimeout yöntemini ve snippet'te gösterildiği gibi aynı özyinelemeli çağrıyı kullanarak elde edilebilir.

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

Güneşi bu kadar hızlı hareket ederken görmek mümkün değil. İnsanlar muhtemelen herhangi bir takılmayı fark etmeyecek.

Cevap #2

Olası bir yaklaşım, içeriğiniz için bir kapsayıcı div kullanmaktır

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

ve sonra javascript'inizde bunun gibi bir şeye sahip olmanız gerekiyor

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

Temelde her saat zamanı kontrol etmeli ve temayı değiştirmeli.

CSS’iniz, sarılmış stil tanımlarını içermelidir:

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

Ve tabii ki, sayfaya girdiğinizde temayı ayarlamayı unutmayın.