Wetterradar

Diskutiere Wetterradar im Java Basics - Anfänger-Themen Forum; 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...

  1. HHenni
    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:

    Code (HTML5):
    <!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 von einem Moderator bearbeitet: 14. Feb. 2019
  2. Vielleicht hilft dir dieser Kurs hier weiter.
  3. 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.
     
Passende Stellenanzeigen aus deiner Region:





Thema: Wetterradar