使用CSS和Javascript按季節更改背景

我想弄清楚如何使用CSS和Javascript更改我的網站背景季節。它似乎應該很容易，但我只是沒有得到它的任何地方。下面是我嘗試，它不工作（當然，對吧？）：使用CSS和Javascript按季節更改背景

<script> 
var currentTime = new Date(); 
var month = currentTime.getMonth() + 1; 
var total = month; 

// Summer 
if (total >= 6 && total <= 8) 
{ 
var season = "summer.jpg"; 
} 
// Autumn 
else if (total >= 9 && total <= 11) 
{ 
var season = "fall.jpg"; 
} 
// Winter 
else if (total == 12 || total == 1 || total == 2) 
{ 
var season = "winter.jpg"; 
} 
// Spring 
else if (total >= 2 && total <= 6) 
{ 
var season = "spring.jpg"; 
} 
else 
{ 
var season = "summer.jpg"; 
} 
</script> 

<style type="text/css"> 

#maincontent{ 
position: fixed; 
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/ 
top: 0px; /*Set top value to HeightOfTopFrameDiv*/ 
right: 0; 
bottom: 0; 
overflow: auto; 
background-image: url('season'); /*Note: I tried putting season in <scirpt> tags too with no success */ 

</style>

來源

2016-11-02 Ken Baumbach

那麼，無論「季節」如何，圖像是不是顯示出來？或者它顯示出來了，但不會隨季節變化？ – user1289451

您無法使用javascript更改background-image屬性。我建議你爲每個賽季創建4個不同的課程，並根據季節改變你的邏輯以添加正確的課程。 – Eddi

是的，你可以.... – felix91

var currentTime = new Date(); 
var month = currentTime.getMonth() + 1; 
var total = month; 
switch(total) { 
    case (total >= 6 && total <= 8): 
    var season = "summer.jpg"; 
    break; 
    case (total >= 9 && total <= 11): 
    var season = "fall.jpg"; 
    break; 
    case (total == 12 || total == 1 || total == 2): 
    var season = "winter.jpg"; 
    break; 
    default: 
    var season = "summer.jpg"; 
    } 
var output = "red url('" + season + "') no-repeat center center fixed"; 
var content= document.getElementById('maincontent'); 

content.style.background = output;

來源

2016-11-02 15:17:31 felix91

您可以指定值賽季做像下面後，通過使用jQuery實現這一目標，

，

$("#maincontent").css("background-image","url(" + season + ")");

通過使用JavaScript，

document.getElementById("maincontent").style.backgroundImage = "url(" + season + ")";

來源

2016-11-02 15:11:36 rJ7

這是jquery，他在js – felix91

@ felix91問你現在可以用這個現在 – rJ7

是的，但人們已經寫了=） – felix91

試試這個：

var main = document.getElementById('maincontent'); 
main.style.backgroundImage = "url(" + season + ")";

來源

2016-11-02 15:12:06 tR4xX

應設置風格的行內...

var maincontent = document.getElementById("#maincontent"); 
var season = "summer"; 

if (condition) { 
    season = "fall" 
} 

// list all your conditions 

maincontent.style.backgroundImage = "url(" + season + ".jpg)";

來源

2016-11-02 15:12:33 Duopixel

使用純JavaScript可以根據自己的情況設置背景圖片。作爲參考，我添加了一段文字，向您顯示當前的賽季。

請看看下面的代碼。

var currentTime = new Date(); 
 
var month = currentTime.getMonth() + 1; 
 
var total = month; 
 

 
console.log('currentTime: ', currentTime); 
 
console.log('month: ', month); 
 
console.log('total: ', total); 
 

 
var myElement = document.querySelector("#maincontent"); 
 
var textSelector = function(divId) { 
 
    var textElement = document.getElementById(divId); 
 
    return textElement; 
 
} 
 

 

 
// Summer 
 
if (total >= 6 && total <= 8) 
 
{ 
 
var season = "summer.jpg"; 
 
myElement.style.backgroundImage = "url('http://placehold.it/500x500')"; 
 
    textSelector('seasonOne').innerHTML = 'Season (Summer)'; 
 
} 
 
// Autumn 
 
else if (total >= 9 && total <= 11) 
 
{ 
 
var season = "fall.jpg"; 
 
myElement.style.backgroundImage = "url('http://placehold.it/500x500')"; 
 
    textSelector('seasonTwo').innerHTML = 'Season (Fall)'; 
 
} 
 
// Winter 
 
else if (total == 12 || total == 1 || total == 2) 
 
{ 
 
var season = "winter.jpg"; 
 
    myElement.style.backgroundImage = "url('http://placehold.it/500x500')"; 
 
    textSelector('seasonThree').innerHTML = 'Season (Winter)'; 
 
} 
 
// Spring 
 
else if (total >= 2 && total <= 6) 
 
{ 
 
var season = "spring.jpg"; 
 
    myElement.style.backgroundImage = "url('http://placehold.it/500x500')"; 
 
    textSelector('seasonThree').innerHTML = 'Season (Spring)'; 
 
} 
 
else 
 
{ 
 
var season = "summer.jpg"; 
 
    myElement.style.backgroundImage = "url('http://placehold.it/500x500')"; 
 
    textSelector('seasonThree').innerHTML = 'Season (Summer)'; 
 
}

#maincontent { 
 
    position: fixed; 
 
    left: 200px; /*Set left value to WidthOfLeftFrameDiv*/ 
 
    top: 0px; /*Set top value to HeightOfTopFrameDiv*/ 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: auto; 
 
    background-image: url('season'); 
 
    background: #aaa; 
 
} 
 

 
.txt { 
 
    padding: 10px 40px; 
 
    font-weight: 700; 
 
}

<div id="maincontent"> 
 
    <div id="seasonOne" class="txt"></div> 
 
    <div id="seasonTwo" class="txt"></div> 
 
    <div id="seasonThree" class="txt"></div> 
 
    <div id="seasonFour" class="txt"></div> 
 
    <div id="seasonFive" class="txt"></div> 
 
</div>

希望這有助於！

來源

2016-11-02 15:40:15

它很棒但你重複if-else部分中的很多代碼 – felix91

使用CSS和Javascript按季節更改背景

回答

相關問題