Изменение фона 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

Возможное решение:

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/

Вы можете смешать мое решение с решением, предоставленным пирамидой ali, которая использует myElement.style.backgroundImage, также хороший подход.

Answer 3

Вам нужно иметь div, например:

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

Затем вы запрашиваете этот div с помощью document.getElementById('change') и обновляете его стиль фона новым URL.