javascript - Change css style depend on real day and night time - Stack Overflow

admin管理员组

文章数量:1399278

I been follow this tutorial. It has animation change after 30 min to day and night its very nice I like it but I was thinking how to make this change for the real day time so its work on my real time and change day and night depend on real time day and night I don't know how to do that can any one help me please here the code :-

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

I been follow this tutorial. It has animation change after 30 min to day and night its very nice I like it but I was thinking how to make this change for the real day time so its work on my real time and change day and night depend on real time day and night I don't know how to do that can any one help me please here the code :-

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 19, 2016 at 13:25 Maarten Bicknese 1,55811 gold badge1414 silver badges2727 bronze badges asked Sep 19, 2016 at 11:36 Aly-ElgarhyAly-Elgarhy 1,16911 gold badge1010 silver badges1414 bronze badges 1

• if you have any further question regarding my answer, feel free to ask. – Maarten Bicknese Commented Sep 19, 2016 at 19:04

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You'll have to offset your timing by the current time on the machine. I've made a small example for you. This example shows an animation over a time window of 10 seconds. This window can be changed by increasing time_window to a full day (1000 * 60 * 60 * 24).

Instead of using the basic animations it uses requestAnimationFrame and the current time. This gives you direct control over the animation and the timing. Setting CSS animations could be subject to CPU speed and/or disabled animations when a tab is not active.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="earth"></div>
<div class="sun"></div>

Performance

This example utilizes the requestAnimationFrame method. Yet if you're going to move a sun over 24h, running 60fps might be a bit overkill. To go easy on ones device you might want to run less updates. This can be achieved using the setTimeout method and the same recursive call as show in the snippet.

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

Seeing the sun doesn't move that fast. People probably won't notice any stutter.

one possible approach is to have a wrapper div for your content

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

and then you have to have something like this in your javascript

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

Basically it should check time every hour and change the theme.

You css should include wrapped style definitions:

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

And, ofc, don't forget to to set the theme once you enter the page.

As the change between day and night won't happen so often, you don't need a animation.

You only need to get the browser time using JS e.g.

var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();

and a if-Statements that decides which CSS should be applied, You can go for hours here.

The following snippet is checking the curent hour (in 24h format).

Instead of creating some day and night css class, it push some css rules at the end of the html element inline style attribute.

This way, this css rules have the highest priority against any others.

It is highly portable, no need to modify any html or css, and we can set many css rules by chaining them in one line.

 /* Day/Night style switcher */
var h = new Date().getHours()
var ds = h > 8 && h < 20
if (ds){ dayStyle();console.log("Day style") }
if (!ds){ nightStyle();console.log("Night style") }
    
function nightStyle(){
  document.documentElement.style += ";background-color:#023202;color:#00d300"
}
function dayStyle(){
  document.documentElement.style += ";background-color:white;color:#000"
}

Hello world!

Using the css filter rule provide very nice and surprising results, simply with well balanced colors:

/* Day/Night style switcher */
var h = new Date().getHours()
var ds = h > 8 && h < 20
if (ds){ dayStyle();console.log("Day style") }
if (!ds){ nightStyle();console.log("Night style") }
    
function nightStyle(){
  document.documentElement.style += ";filter:invert(1)"
}
function dayStyle(){
  document.documentElement.style += ";filter:invert(0)"
}

hello world!

本文标签： javascriptChange css style depend on real day and night timeStack Overflow