如何在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-image CSS 属性。

注意这些图片来自维基媒体，所以不要在你的个人项目中使用它们。

 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>