Javascript更改背景取决于一天中的时间

Question

我有这段代码，可以根据一天中的时间、星期几来改变图片。我想做的是把这些图片作为背景。我该怎么做？

法典：

<script src="https://momentjs.com/downloads/moment.js"> 
</script> 
<script src="https://momentjs.com/downloads/moment-timezone-with- 
data.js"> 
</script> 
<script type="text/javascript"> 
document.write("<p>"); 
var d = moment().tz('Europe/Oslo').format('dddd'); 
var hr = moment().tz('Europe/Oslo').format('k') ; 
if (d=="Monday" && hr==0) { 
documenet.write("<img src='https://static.wixstatic.com/media/e2aefa_7c93b6fa4d3549339bc3aac1311a4936~mv2.png/v1/crop/x_15,y_18,w_789,h_778/fill/w_270,h_270,al_c,usm_0.66_1.00_0.01/e2aefa_7c93b6fa4d3549339bc3aac1311a4936~mv2.png'>"); 
} 

if (d=="Tuesday" && hr==22) { 
document.write("<img src='https://static.wixstatic.com/media/e2aefa_7a8cd6f4b9904671a404f27a327db091~mv2.jpg/v1/crop/x_81,y_0,w_476,h_480/fill/w_270,h_272,al_c,q_80,usm_0.66_1.00_0.01/e2aefa_7a8cd6f4b9904671a404f27a327db091~mv2.jpg'>"); 
} 

if (d=="Thursday" && hr==24) { 
document.write("<img src='https://static.wixstatic.com/media/e2aefa_6ca6df712186436287875feeb5cb2232~mv2.jpg/v1/fill/w_269,h_269,al_c,q_80,usm_0.66_1.00_0.01/e2aefa_6ca6df712186436287875feeb5cb2232~mv2.jpg'>"); 
} 

Answer 1

在你的html中

<div id="my-element"></div>

在你的JavaScript中：

var myElement = document.getElementById('my-element');
myElement.style.backgroundImage = 'url("https://static.wixstatic.com/media/e2aefa_7c93b6fa4d3549339bc3aac1311a4936~mv2.png/v1/crop/x_15,y_18,w_789,h_778/fill/w_270,h_270,al_c,usm_0.66_1.00_0.01/e2aefa_7c93b6fa4d3549339bc3aac1311a4936~mv2.png")';

Answer 2

你需要有一个div，例如：

<div id="change">..<div>

然后，使用document.getElementById('change')查询此div，并使用新的 url 更新其样式背景。

Answer 3

一个可能的解决方案：

var d = moment().tz('Europe/Oslo').format('dddd'); 
var hr = moment().tz('Europe/Oslo').format('k') ; 
var cssString;
if (hr>12 && d==="Sunday") {
// Sunday afternoon
cssString = "background-image:url(https://picsum.photos/1400/1000?image=11)";
}
else if(hr<11 && d==="Monday") {
// Monday morning
cssString = "background-image:url(https://picsum.photos/1400/1000?image=12)";
}
else {
cssString = "background-image:url(https://picsum.photos/1400/1000?image=13)";
}
document.body.insertAdjacentHTML("beforeend", `<div class="bg" style="${cssString}"></div>`);

.css：

.bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}

工作示例： https://jsfiddle.net/v178Lo30/2/

您可以将我的解决方案与金字塔阿里提供的解决方案混合使用myElement.style.backgroundImage，这也是一个不错的方法。