如何使用带有if条件的javaScript更改背景图像?

Question

我正在制作一个日历时钟，我想每月使用 if 语句更改背景图像。我正在尝试，但我所有的方法都不起作用。你能帮我这个吗？

var tday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

var tmonth =["January","February","March","April","May","June","July","August","September","October","November","December"];

function getCalendar(){

var d = new Date();
var nday = d.getDay();
var nmonth = d.getMonth();
var ndate = d.getDate();
var nyear = d.getFullYear();
var dateText =""+tday[nday];
var monthText = ""+tmonth[nmonth];
var nCalendar = ""+monthText + " " + ndate + ", " + nyear
	
document.getElementById('nDay').innerHTML = dateText;
document.getElementById('nCalendar').innerHTML = nCalendar;
document.getElementById("whatDay").style.backgroundImage = "url('images/january.png')";
}

<div id="whatDay">
<div id="nDay" class="calendarDay">wednesday</div>
<div id="nCalendar" class="calendar">December 30, 2050</div>
<div id="clockbox" class="myClock"></div>
</div>

Answer 1

您可以使用包含所有存储图像的数组，然后通过 JS DOM 将该值分配给background-imageCSS 属性。

请注意，这些图像来自维基媒体，因此请勿在您的个人项目中使用它们。

var tday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

var tmonth =["January","February","March","April","May","June","July","August","September","October","November","December"];
var images = ["https://upload.wikimedia.org/wikipedia/commons/b/b9/Aftermath_of_January_2018_North_American_blizzard_2.jpg", "https://upload.wikimedia.org/wikipedia/commons/7/7e/Iron_Bridge_east_side_in_February_2019.jpg", "https://commons.wikimedia.org/wiki/File:Flower_in_the_Flagstaff_snow.jpg", "https://upload.wikimedia.org/wikipedia/commons/0/03/Flowers_on_Potsdam_street_5_%28April%2C_2018%29.jpg", "https://upload.wikimedia.org/wikipedia/commons/5/50/Poison_ivy_in_May_beside_Appalachian_Trail_in_Rockfish_Gap_VA_area_1.jpg", "https://upload.wikimedia.org/wikipedia/commons/d/de/Caesars_Head_State_Park_overlook%2C_June_2019_1.JPG", "https://upload.wikimedia.org/wikipedia/commons/f/f9/F%C3%A5r%C3%B6_fyr_July_2019_06.jpg", "https://upload.wikimedia.org/wikipedia/commons/1/14/Athens_and_Piraeus_from_Mount_Lycabettus_on_August_24%2C_2019.jpg", "https://upload.wikimedia.org/wikipedia/commons/3/37/Cloudy_weather_at_Stortinden%2C_Skrovkjosen%2C_Tysfjord%2C_Norway%2C_2018_September.jpg", "https://upload.wikimedia.org/wikipedia/commons/6/6a/John_Everett_Millais_-_Chill_October.JPG", "https://upload.wikimedia.org/wikipedia/commons/c/c3/Inspiration_Point_Bryce_Canyon_November_2018_panorama.jpg", "https://upload.wikimedia.org/wikipedia/commons/7/72/Snow_Scene_at_Shipka_Pass_1.JPG"];
function getCalendar(){
var d = new Date();
var nday = d.getDay();
var nmonth = d.getMonth();
var ndate = d.getDate();
var nyear = d.getFullYear();
var dateText =""+tday[nday];
var monthText = ""+tmonth[nmonth];
var nCalendar = ""+monthText + " " + ndate + ", " + nyear;

document.getElementById('nDay').innerHTML = dateText;
document.getElementById('nCalendar').innerHTML = nCalendar;

document.getElementById("whatDay").style.backgroundImage = "url('" + images[nmonth] + "')";
}
getCalendar();

<div id="whatDay" style="height:400px;background-repeat:no-repeat;background-size:cover;">
<div id="nDay" class="calendarDay"></div>
<div id="nCalendar" class="calendar"></div>
<div id="clockbox" class="myClock"></div>
</div>