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

【问题标题】：Javascript change background depend on time of the day.Javascript 更改背景取决于一天中的时间。
【发布时间】：2018-10-16 07:33:43
【问题描述】：

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

代码：

    <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'>"); 

}

【问题讨论】：

标签： javascript html image background

【解决方案1】：

一个可能的解决方案：

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 的 pyramid ali 提供的解决方案混合使用，这也是一种好方法。

【讨论】：

【解决方案2】：

你需要有一个 div 例如：

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

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

【讨论】：

【解决方案3】：

在你的 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")';

【讨论】：