基於一天中的時間更改背景圖像

我有一個「部分」，它有一個背景圖像。基於一天中的時間更改背景圖像

<section id="header" class="color-light text-center" data-type="background" data-speed="10">

這是CSS

#header { 
    background: url('sunrise.jpg') 50% 0 no-repeat fixed; 
    height: 800px; 
    margin: 0; 
    overflow: hidden; 
    color: #f4f4f4; 
}

使用這個JavaScript，我檢查一天的時間...

 var d = new Date(); 
     var n = d.getHours(); 
     if (n > 19 || n < 6) 
     $("#header").className = "night"; 
     else if (n > 16 && n < 19) 
     $("#header").className = "sunset"; 
     else 
     $("#header").className = "day";

我有這樣的CSS文件....但不知道如何或如果我需要使用它

/* backgrounds */ 
.day { background: url('sunrise.jpg') 50% 0 no-repeat fixed; } 
.sunset { background: url('sunset.jpg') 50% 0 no-repeat fixed; } 
.night { background: url('night.jpg')50% 0 no-repeat fixed; }

我我不知道如果我錯過了使用jquery更改#header的方式，並應用更新的背景值。

來源

2016-03-07 pithhelmet

題外話，但，是的#header那麼當n = 16和n = 19時呢？你需要爲此添加邏輯。 –

這應該是所有你需要做的

var d = new Date(); 
     var n = d.getHours(); 
     if (n > 19 || n < 6) 
     $(#header).css("background", "url('night.jpg')"); 
     else if (n > 16 && n < 19) 
     $("#header").css("background", "url('sunset.jpg')"); 
     else 
     $("#header").css("background", "url('day.jpg')");

來源

2016-03-07 19:02:51 Shniper

className不是您可以直接通過jQuery對象訪問的屬性。要更改jQuery對象的屬性，可以使用.prop()，但在這種情況下，因爲它是一個類，所以可以簡單地使用.addClass(),.removeClass()和.toggleClass()。在這裏看到：http://api.jquery.com/category/manipulation/class-attribute/

只要與代碼中沒有其他問題，這應該工作：

var d = new Date(); 
    var n = d.getHours(); 
    if (n > 19 || n < 6) 
    $("#header").addClass("night"); 
    else if (n > 16 && n < 19) 
    $("#header").addClass("sunset"); 
    else 
    $("#header").addClass("day");

來源

2016-03-07 19:02:16

基於一天中的時間更改背景圖像

回答

相關問題