1

Bom estou tentando adicionar uma imagem no background usando o js, ele funciona assim quando o relogio chega em uma determinada hora ele adiciona outra imagem exemplo da noite ou da tarde ou manha.


    </div>
    <div id="wa">
 
    </div>

    <div id="bb">
    </div>
        <img src="dia/boa tarde.jpg " alt="" id="foto">


<script src="relogio.js"></script>

3 Respostas 3

1

Pode fazer da seguinte forma

var tempoVerficacao = 3000;
setInterval(function(){ 
    var d = new Date();
    var hora = d.getHours();
    if(hora == 22){
       document.getElementsByTagName("body")[0].style = 'background-image:url("noite.jpg");'
    }

 }, tempoVerficacao);


3
  • certo, porem eu queria adicionar no fundo da pagina. o "id = foto" e apenas uma div.
    – walace js
    Commented 24/01/2021 às 1:57
  • @walacejs teste a alteração Commented 24/01/2021 às 21:25
  • 1
    Show deu certo meu muuuuuuuuuito obrigado pela atençao.
    – walace js
    Commented 24/01/2021 às 22:09
0

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;
}

1
  • interessante mais muito complexa estar alem dos meus conhecimentos, kkkk sou iniciante.
    – walace js
    Commented 24/01/2021 às 12:52
-1

var img = document.createElement("img"); //Crie o elemento

img.src = '../'; //local da imagem a ser carregada

document.body.appendChild(img); //adicione o elemento ao body ou "document.getElementById"

1
  • quase la masi quando eu adiciono o elemento ele cria um outro plano de fundo la em baixo, como o nome diz appendchild ele adicionar e nao substitui o plano principal. voce sabe uma maneira de substituir o plano de fundo principal?
    – walace js
    Commented 24/01/2021 às 12:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .