Wetterradar

H

HHenni

Neues Mitglied
Guten Abend,

ich bin derzeit dabei eine kleine 7 Zoll Wetterstation mit Hilfe von HTML, CSS und JavaScript zu erstellen. Hier soll auf der linken Seite ein aktuelles Regenradar mit Prognose zu sehen sein. Hierfür habe ich die URL für den entsprechenden Kartenausschnitt aus dem Quelltext herausgesucht und entsprechend verformelt (da dynamisch für jedes 5 Minuten Intervall)

https://www.wetteronline.de/?pid=p_radar_map&ireq=true&src=wmapsextract/vermarktung/global2maps/"+Jahr+"/"+Monat+"/"+Tag+"/SHS/grey_flat/"+Jahr+Monat+Tag+Stunde+Minute+"_SHS.png"

Hier habe ich jetzt meine Variablen deklariert und entsprechend verformelt.
Jetzt stehe ich leider vor dem Problem, dass ich nicht weiß wie ich eine Abfolge von Bildern erstellen kann die auf eine verformelte Quelle zurückgreifen. Die statische Idee ist folgende:

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>


</style>
</head>
<body>

<div class="WetterKarten">
  <img src="IMG1.png">
</div>

<div class="WetterKarten">
  <img src="IMG2.png">
</div>


<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("WetterKarten");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
   }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 1000); // Change image every 2 seconds
}
</script>

</body>
</html>

Hat vielleicht jemand eine Idee wie ich hier weiterkomme, damit die Quelle mit einer Schleife oder ähnlichem so angepasst werden kann, dass immer die letzte Stunde (in 15 Minuten-Schritten) sowie die nächste Stunde (in 15 Minuten-Schritten) dargestellt werden kann.

Ganz lieben Dank für die Zeit und Hilfe.

Beste Grüße
Henrik
 
Zuletzt bearbeitet von einem Moderator:
mrBrown

mrBrown

Super-Moderator
Mitarbeiter
Am einfachsten mit setInterval statt einer Schleife, und dann darin die Bilder passend aktualisieren.

Den Zeitpunkt kannst du über Date bekommen, müsstest dann damit nur die URL zusammen basteln und den img's als src setzen.
 

Aktuelle Jobs

Neue Themen


Oben