javascript - 如何进行背景图像转换？

Question

我想创建一个带有过渡的白天和黑夜背景。这是我到目前为止所拥有的:DEMO .

这就是我白天和黑夜的变化，但我无法将它们相互淡化

CSS:

.day
{
    background-image: linear-gradient(orange,lightyellow);
}
.night
{
    background-image: linear-gradient(#111111,darkblue);
}

JQUERY:

function dayAndNight(){
    if($('#achtergrond').attr('class')== "night")
            $('#achtergrond').toggleClass('night day');
    else if($('#achtergrond').attr('class')== "day")
            $('#achtergrond').toggleClass('day night');
}

setInterval(function(){dayAndNight();},2000);

我怎样才能把白天变成黑夜，把黑夜变成白天？

Answer 1

首先。如果你想进行白天和黑夜的过渡。的 setInterval() 函数javascript 是一个非常糟糕的主意。如果使用 getHours() 函数会更好。

var date = new Date(); 
var h = date.getHours(); 
alert(h);

您将获得当前营业时间。现在你可以有一个 if 语句，比如

if(h>6){
   //Its Evening
}

这是一个久经考验的代码，可实现您想要的日夜转换。

var date = new Date(); 
var h = date.getHours();
if(h<6){
    $('#achtergrond').attr('class','day');
    $('#achtergrond').fadeIn();
}else{
    $('#achtergrond').attr('class','night');    
    $('#achtergrond').fadeIn();
}