Display image according to time by repeating the javascript function

Navigation
1

I'm using this code to display two images on a particular 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"/><imgid="mapa_movimento" src="" />
</div>

</body>
</html>

Soon after the tag close the 'body' tag I'm using this script to determine which image will be displayed within the ID="movemap" 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 want to use a different image for each minute ... and that's ok, the problem is to have the function repeated every 60 seconds to change the displayed image to the user.

For example, if you access 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 to use 'setInterval' and 'setTimeout', but it did not work, I believe that it is the lack of the name of this function that changes the images, however I could not make it work when I changed it to: p> 

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

    
asked by anonymous 29.01.2017 / 08:22

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 is open then you need JavaScript.

Note: you should put the tag <script> not after closing body but rather 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"/><imgid="mapa_movimento" src="" />
  </div>

</body>

</html>
    
29.01.2017 / 09:35
Problem with Grid in css Can you capture type events when I press a key in C ++? [CodeBlocks]