hier mal ein Beispiel für json
HTML
- <div id="OnAir-Box">
- <div id="profil_bild"></div>
- <div id="anzeigename"></div>
- <div id="showname"></div>
- <div id="von"></div>
- <div id="bis"></div>
- <div id="grussbox"></div>
- </div>
- <script>
- const apiUrl = 'HIER_IHRE_JSON_API_URL_EINFÜGEN';
- function updateData() {
- fetch(apiUrl)
- .then(response => response.json())
- .then(data => {
- document.getElementById("von").innerText = `Von: ${data.von}`;
- document.getElementById("bis").innerText = `Bis: ${data.bis}`;
- document.getElementById("showname").innerText = `Sendung: ${data.showname}`;
- document.getElementById("anzeigename").innerText = `Anzeigename: ${data.anzeigename}`;
- document.getElementById("grussbox").innerHTML = data.grussbox === 1
- ? '<button onclick="openGrussboxURL()">Grussbox öffnen</button>'
- : '';
- document.getElementById("profil_bild").innerHTML = `<img src="${data.profil_bild}" alt="Profil Bild">`;
- })
- .catch(error => console.error('Fehler beim Abrufen der Daten:', error));
- }
- function openGrussboxURL() {
- const grussboxUrl = 'HIER_IHRE_GRUSSBOX_URL_EINFÜGEN';
- window.open(grussboxUrl, '_blank');
- }
- updateData();
- setInterval(updateData, 30000); // Alle 30 Sekunden aktualisieren
- </script>
HIER_IHRE_JSON_API_URL_EINFÜGEN = zur Onair json abfrage url
HIER_IHRE_GRUSSBOX_URL_EINFÜGEN = zur Wunsch box url
mit css kann man es auch noch verschönern