Display image according to time by repeating javascript function

Asked

Viewed 520 times

1

I am using this code to display two images on a given page:

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<style>
#mapinha {
position: relative;
top: 0;
left: 0;
}
#mapa_big {
position: relative;
top: 0;
left: 0;
}
#mapa_movimento {
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="mapinha">
  <img id="mapa_big" src="http://triviapw.hiperportal.blog.br/elysium_old/images/floresta_yujia_big_v2.jpg" />
  <img id="mapa_movimento" src="" />
</div>

</body>
</html>

Soon after the tag closes the tag 'body' I am using this script to determine which image will be displayed inside the ID="map_movement" according to the current minute:

<script type="text/javascript">
var currentTime = new Date().getMinutes();

if (44 <= currentTime && currentTime < 45) {
    if (document.getElementById) {
        document.getElementById("mapa_movimento").src = "http://triviapw.hiperportal.blog.br/elysium_old/images/moves/floresta_yujia_v2_move_001.png";
    }
}
if (46 <= currentTime && currentTime < 47) {
    if (document.getElementById) {
        document.getElementById("mapa_movimento").src = "http://triviapw.hiperportal.blog.br/elysium_old/images/moves/floresta_yujia_v2_move_002.png";
    }
}
else {
    if (document.getElementById) {
        document.getElementById("mapa_movimento").src = "http://triviapw.hiperportal.blog.br/elysium_old/images/moves/floresta_yujia_v2_move_003.png";
    }
}
</script>

I intend to use a different image for each minute... and this is already ok, the problem is to have the function repeat every 60 seconds to change the image displayed to the user.

For example, if you go to the page at 05:44 hours, the image "...001.png" will be displayed, but when you change the time to 05:55, the image to be displayed should be "...002.png".

To solve the problem, I tried using 'setInterval' and 'setTimeout', but it did not work, I believe it is the lack of the name of this function that changes the images, but I could not make it work when I changed to:

<script type="text/javascript">
function mudarImagem(){
	var currentTime = new Date().getMinutes();

if (44 <= currentTime && currentTime < 45) {
    if (document.getElementById) {
        document.getElementById("mapa_movimento").src = "http://triviapw.hiperportal.blog.br/elysium_old/images/moves/floresta_yujia_v2_move_001.png";
    }
}
if (46 <= currentTime && currentTime < 47) {
    if (document.getElementById) {
        document.getElementById("mapa_movimento").src = "http://triviapw.hiperportal.blog.br/elysium_old/images/moves/floresta_yujia_v2_move_002.png";
    }
}
else {
    if (document.getElementById) {
        document.getElementById("mapa_movimento").src = "http://triviapw.hiperportal.blog.br/elysium_old/images/moves/floresta_yujia_v2_move_003.png";
    }
}}
</script>

Thank you.

php javascript setinterval settimeout

1 answer

2


To show the image you want when the page loads you can also do it on the server. If you want the page to change the image while it’s open then you need Javascript.

Note: you should tag <script> not after the close of the body but before.

You can do it like this:

function mudarImagem() {
  var currentTime = new Date().getMinutes();
  var img = document.getElementById("mapa_movimento");
  var base = "http://triviapw.hiperportal.blog.br/elysium_old/images/moves/";

  if (44 <= currentTime && currentTime < 45) {
    img.src = base + "floresta_yujia_v2_move_001.png";
  } else if (46 <= currentTime && currentTime < 47) {
    img.src = base + "floresta_yujia_v2_move_002.png";
  } else {
    img.src = base + "floresta_yujia_v2_move_003.png";
  }
  return mudarImagem;
}

setInterval(mudarImagem(), 30 * 1000); // atualizar a cada 30 segundos
<!DOCTYPE html>
<html>

<head>
  <style>
    #mapinha {
      position: relative;
      top: 0;
      left: 0;
    }
    #mapa_big {
      position: relative;
      top: 0;
      left: 0;
    }
    #mapa_movimento {
      position: absolute;
      top: 0px;
      left: 0px;
    }
  </style>
</head>

<body>
  <div id="mapinha">
    <img id="mapa_big" src="http://triviapw.hiperportal.blog.br/elysium_old/images/floresta_yujia_big_v2.jpg" />
    <img id="mapa_movimento" src="" />
  </div>

</body>

</html>

  • It worked perfectly, thank you!

Browser other questions tagged php javascript setinterval settimeout

You are not signed in. Login or sign up in order to post.