TransWikia.com

pessoal como eu adiciono uma imagem no background pelo javascrip?

Stack Overflow em Português Asked by walace js on February 5, 2021

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>
cssimgjavascript

3 Answers

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

Answered by dfvc on February 5, 2021

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"

Answered by Douglas Fernando on February 5, 2021

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

Answered by Zé Reis M. Olliver on February 5, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP