Countdown bis Weihnachten etc.

Begonnen von haempy, 13 Februar 2019, 17:02:21

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

haempy

13 Februar 2019, 17:02:21
Hi,
ich suche eine Möglichkeit, einen Countdown bis zu einem Bestimmten Tag mit Uhrzeit ablaufen zu lassen...
Leider hab ich keine HTML Kenntnisse  :o

Bisher habe ich dieses Script eingebunden:
Code Auswählen
                   
   
                   <!-- Display the countdown timer in an element -->
                    <p id="countdown"></p>

                    <script>
                        // Set the date we're counting down to
                        var countDownDate = new Date("Feb 20, 2019 09:00:00").getTime();

                        // Update the count down every 1 second
                        var x = setInterval(function() {

                        // Get todays date and time
                        var now = new Date().getTime();

                        // Find the distance between now and the count down date
                        var distance = countDownDate - now;

                        // Time calculations for days, hours, minutes and seconds
                        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                        // Display the result in the element with id="countdown"
                        document.getElementById("countdown").innerHTML = days + "T " + hours + "S "
                        + minutes + "m " + seconds + "s ";

                        // If the count down is finished, write some text
                        if (distance < 0) {
                            clearInterval(x);
                            document.getElementById("countdown").innerHTML = "EXPIRED";
                        }
                        }, 1000);
                    </script>



Das Problem: Wenn ich via Pagetab umschalte bekommen ich jede Sekunde folgenden Fehler: Cannot set property 'innerHTML' of null
Dieser Fehler erscheint in der JavaScriptkonsole und auf der FTUI Oberfläche.... sehr lästig.

Gibt es eine Elegantere, richtigere und schönere Lösung?? ;)

Mercie
Gruß Roland


moonsorrox

#1
14 Februar 2019, 23:48:58
hier im Forum gibt es unter DOIF einen Countdown, ich hatte vor längerer Zeit nach so etwas gefragt...! Bei mir ging es darum das ich bis zu einem bestimmten Zeitpunkt die Tage zähle und diese unter FTUI als Text darstelle.
Bei mir ist es die Saison für das Motorrad fahren, einmal zähle ich bis zum Beginn und einmal zähle ich bis zum Ende der Motorrad Saison.

Evtl. ist es das was du möchtest..?
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

haempy

#2
15 Februar 2019, 14:15:31
Hi Danke für deine Antwort,

das habe ich mir angeguckt! Ist aber nicht so ganz das was ich möchte...

Habs jetzt aber gelöst bekommen!

Ich hab eine Extra Countdown.ftui.html, welche das Script beinhaltet + ein paar Styleanpassungen.

dieses rufe ich dann per Iframe auf!
Ergebnis passt, siehe screenshot!

Countdown.ftui.html:
Code Auswählen

<html>
<title>FHEM Countdown</title>
<head>

<style>
body {

}



p {
  font-family: verdana;
  font-size: 20px;
  color: white;
  text-align: center;
  width: 200;
  height: 50;
}
</style>
</head>

<body>
<div class="gridster">
<ul>
<!-- Display the countdown timer in an element -->
                    <p id="Countdown"></p>

                    <script>
                        // Set the date we're counting down to
                        var countDownDate = new Date("Feb 20, 2019 09:00:00").getTime();

                        // Update the count down every 1 second
                        var x = setInterval(function() {

                        // Get todays date and time
                        var now = new Date().getTime();

                        // Find the distance between now and the count down date
                        var distance = countDownDate - now;

                        // Time calculations for days, hours, minutes and seconds
                        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                        // Display the result in the element with id="Countdown"
                        document.getElementById("Countdown").innerHTML = days + "T " + hours + "S "
                        + minutes + "m " + seconds + "s ";

                        // If the count down is finished, write some text
                        if (distance < 0) {
                            clearInterval(x);
                            document.getElementById("Countdown").innerHTML = "EXPIRED";
                        }
                        }, 1000);
                    </script>
                   
</ul>
</div>
</body>
</html>


Einbindung in Home.ftui.html:
Code Auswählen

<li class="halbTransparent border-right" data-row="3" data-col="8" data-sizex="2" data-sizey="1">

    <header class="headerTransparent large">Countdown</header>
    <div class="inline" style="font-size:140%" ><br/>Zeit bis Hüttenurlaub</div>
<div data-type="iframe"
    data-src="http://MeinServer/FTUI/tablet/Countdown.ftui.html"
    data-fill="no"
    data-height="50"
    data-width="300"
></div>

</li>

Drucken
Nach oben Seiten1
Benutzer-Aktionen