openlp-html/willkommen/willkommen.js

// Stopzeitpunkt setzten
var h = parameter.stunde;
var m = parameter.minute;

// Hintergrundbild setzen
document.getElementsByTagName("body")[0].style.backgroundImage = "url("+ parameter.hintergrund + ")";

// Titel eintragen
document.getElementById("willkommenTxt").innerHTML = parameter.titel;

// Text eintragen
document.getElementById("versTxt").firstChild.data = parameter.text;
document.getElementById("versZusatz").textContent = parameter.zusatz;

var d = new Date();
var countdownEnde = new Date(d.getFullYear(), d.getMonth(), d.getDate(), h, m).getTime();

// die Funktion wird jede Sekunde aufgerufen
var t = setInterval(function() {

  // aktueller Zeitstempel
  var jetzt = new Date().getTime();

  // Unterschied zwischen aktuellem Zeitstempel und CountdownEnde berechnen
  var abstand = countdownEnde - jetzt;

  // Minuten und Sekunden berechnen
  var m = ("0" + Math.floor((abstand % (1000 * 60 * 60)) / (1000 * 60))).slice (-2);
  var s = ("0" + Math.floor((abstand % (1000 * 60)) / 1000)).slice (-2);

  // Ergebnis in element mit id="countdown" anzeigen
  document.getElementById("countdown").innerHTML = m + ":" + s;

  // wenn der Countdown abgelaufen ist, Intervall stoppen und "00:00" anzeigen
  if (abstand < 0) {
    clearInterval(d);
    document.getElementById("countdown").innerHTML = "00:00";
  }
}, 1000);

// Funktion zum Anpassen der Elemente an die Anzeigegröße
var grNeu = function() {
  var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  var grWk = width / 1.7;
  var grWkTxt = Math.round(grWk / 350 * 100);
  var grVsTxt = Math.round(grWk / 350 * 100);
  var grCd = Math.min(width / 5, height / 5);
  var grCdTxt = Math.round(grCd / 130 * 100);

  document.getElementById('willkommenTxt').style.fontSize = grWkTxt + '%';
  document.getElementById('versCt').style.fontSize = grVsTxt + '%';

  document.getElementById('fusszeile').style.width = grCd + 'px';
  document.getElementById('fusszeile').style.height = grCd + 'px';
  document.getElementById('fusszeile').style.borderTopRightRadius = grCd + 'px';
  document.getElementById('countdown').style.fontSize = grCdTxt + '%';
}

grNeu();

// Überwachen der Anzeigegröße und anpassen der Element
window.addEventListener("resize", function() { grNeu(); }, true);