ONAIR - Anzeige

Hallöchen,

habe die Suche erfolglos genutzt und wollte nun Fragen ob es so wie bei den folgenden Beitrag (ONAIR - Beispiel) die Möglichkeit noch zusätzlich gibt, dass man die Uhrzeit noch einbinden kann dann wäre die ONAIR - Anzeige echt spitzenmäßig ;).

Sprich das es wie folgt aussieht:

Ausgabe:

[Moderator Bild]

Moderator: mit Sendepause

Sendung: Moderator

Sendezeit: XX - XX UHR

Vielen Dank schon mal im Vorraus für eure Hilfe

Danke dir für die schnelle Antwort und so ein echt guten Support - da macht es einfach noch mehr Spaß den Sendeplan zu nutzen

drcomputer schrieb:

hier mal ein Beispiel für json

HTML

1. <div id="OnAir-Box">
2. <div id="profil_bild"></div>
3. <div id="anzeigename"></div>
4. <div id="showname"></div>
5. <div id="von"></div>
6. <div id="bis"></div>
7. <div id="grussbox"></div>
8. </div>
10. <script>
11. const apiUrl = 'HIER_IHRE_JSON_API_URL_EINFÜGEN';
12. function updateData() {
13. fetch(apiUrl)
14. .then(response => response.json())
15. .then(data => {
16. document.getElementById("von").innerText = `Von: ${data.von}`;
17. document.getElementById("bis").innerText = `Bis: ${data.bis}`;
18. document.getElementById("showname").innerText = `Sendung: ${data.showname}`;
19. document.getElementById("anzeigename").innerText = `Anzeigename: ${data.anzeigename}`;
20. document.getElementById("grussbox").innerHTML = data.grussbox === 1
21. ? '<button onclick="openGrussboxURL()">Grussbox öffnen</button>'
22. : '';
23. document.getElementById("profil_bild").innerHTML = `<img src="${data.profil_bild}" alt="Profil Bild">`;
24. })
25. .catch(error => console.error('Fehler beim Abrufen der Daten:', error));
26. }
28. function openGrussboxURL() {
29. const grussboxUrl = 'HIER_IHRE_GRUSSBOX_URL_EINFÜGEN';
30. window.open(grussboxUrl, '_blank');
31. }
33. updateData();
34. setInterval(updateData, 30000); // Alle 30 Sekunden aktualisieren
35. </script>

Alles anzeigen

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

Alles anzeigen