Penso que seja isto que pretende...
No seguinte código é definido um objecto backgroundUrlsPerHour
em que cada chave representa uma hora e o respetivo valor é o url de uma imagem. Pode adicionar mais entradas neste objeto (uma por hora) se pretender.
A função runBackgroundRotator
verifica a cada 15 minutos (valor por defeito que pode ser alterado quando chama a função) a hora atual e altera a imagem de fundo sempre que necessário.
Implementei ainda a função setInitialBackground
que é responsável por definir a imagem de fundo quando arranca a aplicação. Basicamente verifica "em que período do dia estamos" e define a imagem correspondente.
const backgroundUrlsPerHour = {
7: 'https://via.placeholder.com/1024/ADD8E6/FFFFFF/?text=manh%C3%A3',
12: 'https://via.placeholder.com/1024/FFC475/FFFFFF/?text=tarde',
19: 'https://via.placeholder.com/1024/333333/ffffff/?text=noite',
};
const setInitialBackground = () => {
const hour = (new Date).getHours();
if (backgroundUrlsPerHour[hour]) {
switchBackground(backgroundUrlsPerHour[hour]);
return;
}
const sortedHours = Object.keys(backgroundUrlsPerHour).sort(
(a, b) => a - b,
);
let closestHour = sortedHours.reduce((acc, cur) =>
Math.abs(cur - hour) < Math.abs(acc - hour) ? cur : acc,
);
if (closestHour > hour) {
const closestHourIndex = sortedHours.indexOf(closestHour);
closestHour = closestHourIndex === 0
? sortedHours[sortedHours.length - 1]
: sortedHours[closestHourIndex - 1];
}
switchBackground(backgroundUrlsPerHour[closestHour]);
};
const runBackgroundRotator = (checkInterval = 900000) => {
const bodyElement = document.querySelector('body');
setInterval(() => {
const hour = (new Date).getHours();
if (backgroundUrlsPerHour[hour]) {
switchBackground(backgroundUrlsPerHour[hour]);
}
}, checkInterval);
};
const switchBackground = (backgroundUrl) => {
const bodyElement = document.querySelector('body');
const currenBackgroundImage = bodyElement.style.backgroundImage;
const newBackgroundImage = `url('${backgroundUrl}')`;
if (newBackgroundImage !== currenBackgroundImage) {
bodyElement.style.backgroundImage = `url('${backgroundUrl}')`;
}
};
setInitialBackground();
runBackgroundRotator();
body {
background-repeat: no-repeat;
background-size: cover;
}