personal as I add an image in the background by javascrip?

Question

Well I’m trying to add an image in the background using js, it works like this when the clock arrives at a certain time it adds another example image of night or afternoon or morning.

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

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


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

Answer 1

You can do it this way

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

Answer 2

I think this is what you want...

In the following code an object is defined backgroundUrlsPerHour where each key represents an hour and its value is the url of an image. You can add more entries to this object (one per hour) if you want to.

The function runBackgroundRotator checks every 15 minutes (default value that can be changed when calling the function) the current time and changes the background image whenever necessary.

I also implemented the function setInitialBackground who is responsible for setting the background image when starting the application. Basically checks "what time of day we are" and sets the corresponding image.

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

Answer 3

var img = Document.createelement("img"); //Create the element

img.src = '.. /'; //location of the image to be loaded

Document.body.appendchild(img); //add the element to the body or "Document.getElementById"