Countdownscript Ausgabe nicht als input? (evtl. mit "Bergfest")?

Muckel1986

Erfahrenes Mitglied
Guten Abend zusammen,

dank der Suchmaschienen habe ich nun ein JavaScript gefunden, welches einen Countdown zu einem Ziel-Datum mit Ziel-Uhrzeit erstellt:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Muckel">
    <meta name="description" content="Ein Countdown zu einem Zieldatum inklusive der Uhrzeit.">
    <meta name="keywords" lang="de" content="Counter,Countdown,zaehlen,wie lange noch">
    <meta http-equiv="content-language" content="de">
    <meta name="robots" content="all">
    <title>Countdown</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript">
        // Ziel-Datum in MEZ
        var jahr=2010, monat=12, tag=27, stunde=15, minute=00, sekunde=00;
        var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);
        
        function countdown() {
        startDatum=new Date(); // Aktuelles Datum
        
        // Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
        if(startDatum<zielDatum)  {
        
        var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;
        
        // Jahre
        while(startDatum<zielDatum) {
        jahre++;
        startDatum.setFullYear(startDatum.getFullYear()+1);
        }
        startDatum.setFullYear(startDatum.getFullYear()-1);
        jahre--;
        
         // Monate
        while(startDatum<zielDatum) {
        monate++;
        startDatum.setMonth(startDatum.getMonth()+1);
        }
        startDatum.setMonth(startDatum.getMonth()-1);
        monate--;
        
        // Tage
        while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
        tage++;
        startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
        }
        
        // Stunden
        stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
        startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);
        
        // Minuten
        minuten=Math.floor((zielDatum-startDatum)/(60*1000));
        startDatum.setTime(startDatum.getTime()+minuten*60*1000);
        
        // Sekunden
        sekunden=Math.floor((zielDatum-startDatum)/1000);
        
        // Anzeige formatieren
        (jahre!=1)?jahre=jahre+" Jahre,  ":jahre=jahre+" Jahr,  ";
        (monate!=1)?monate=monate+" Monate,  ":monate=monate+" Monat,  ";
        (tage!=1)?tage=tage+" Tage,  ":tage=tage+" Tag,  ";
        (stunden!=1)?stunden=stunden+" Stunden,  ":stunden=stunden+" Stunde,  ";
        (minuten!=1)?minuten=minuten+" Minuten  und  ":minuten=minuten+" Minute  und  ";
        if(sekunden<10) sekunden="0"+sekunden;
        (sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";
        
        document.countdownform.countdowninput.value=
        jahre+monate+tage+stunden+minuten+sekunden;
        
        setTimeout('countdown()',200);
        }
        // Anderenfalls alles auf Null setzen
        else document.countdownform.countdowninput.value=
        "0 Jahre,  0 Monate,  0 Tage,  0 Stunden,  0 Minuten  und  00 Sekunden";
        }
</script>
</head>
<body onload="countdown()">
<!-- hier steht noch etwas Text... -->
    <form name="countdownform">
        <p><input size="75" name="countdowninput"></p>
    </form>
<!-- auch hier ist nochmal Text -->
</body>
</html>
Wie ihr sehen könnt, ist die Ausgabe des "Countdown" in einem Formular-Bereich als input Feld. Gut, dank CSS kann man auch das ein wenig gestalten, aber wäre es möglich das als Absatz (p), span oder DIV auszugeben?

Und wenn das vielleicht geändert werden könnte, habe ich wenn es möglich ist, noch zwei Fragen/Wünsche. Wenn die Halbzeit/Bergfest erreicht ist, könnte man für diesen Tag eine Möglichkeit schaffen, dass automatisch ein anderer Inhalt gelanden wird? Oder müsste ich dafür auf php setzten und z.B. eine IF-Anweisung nehmen, die das Datum abfragt und wenn nur dieser eine Tag da ist, das dann eine anderer Inhalt geladen wird? Also nach dem Chema "Wenn Datum X, dann Inhalt A, sonst Inhalt B". Geht das auch mit Ajax/JavaScript?

Wäre schön, wenn ihr mir helfen könnt!
Liebe Grüße
Muckel
 
Guten Abend,
mein Ansatz wäre, allerdings nur via php folgender:
PHP:
<?php 
$datum = date("d.m.Y",$timestamp); //Aktuelles Datum
$bergfest = "27.12.2010"; // Zeildatum angeben
// $bergfest = mktime(15,00,0,12,27,2010);
// $bergfest = "27.12.2010";
// $bergfest = date("d.m.Y","27.12.2010");

// zum Testen des Variablen ausgeben
echo ("<p>Datum:" . $datum . "</p>");
echo ("<p>Bergfest:" . $bergfest . "</p>");

// nun die Wenn-Dann-Sonnst Abfrage um das Bergfest zu bestimmen
if ($datum == $bergfest )
    {
    echo ("<h1>Bergfest</h1>
        <p>Heute ist Bergfest! Die l&auml;ngste Wartezeit ist vorr&uuml;ber.</p>");
    }
    else {
    echo ("<h1>noch kein Bergfest</h1>
        <p>Heute ist noch kein Bergfest. Leider ist die l&auml;ngste Wartezeit noch nicht vorbei.</p>");
    }
?>
Im Anfang der Datei würde ich das JavaScript für den Countdown belassen. Und jenen dann über die IF-Abfrage einbauen. Dazu müsste ich nur das Datum übergeben können. Nur weiß ich da leider noch nicht wie.

Wäre es auch möglich, dass ich die Datum und Zeitangabe für den Countdown auch als php-Variable ausgebe? Oder wäre php im JavaScript nicht möglich? Denn wenn das geht, müsste ich alles nur einmal angeben.

Aber erstmal würde ich gerne wissen, wie ich das mit dem Datum geregelt bekomme. Denn bei mir wird leider nicht das heutige Datum ausgegeben, sondern "01.01.1970" wie ihr auch hier sehen könnt.

Vielen Dank
Muckel

P.S.: Vielleicht sollte der Beitrag doch in's PHP-Forum verschoben werden; wobei es vielleicht auf die Antworten ankommt, die ich hoffentlich noch bekomme. Danke!
 
Guten Abend,
nachdem ein paar Beispiele im Web nicht geklappt haben, da die bei dem datum noch den timestamp genutzt haben, wurde immer das Datum der 1. Zählung angegeben. Dies konnte ich nun beheben und auch die Wenn-Dann-Sonnst funktioniert:
PHP:
<?php
$datum = date("d.m.Y"); //Aktuelles Datum
$bergfest = "03.10.2010"; // Zeildatum angeben

// zum Testen des Variablen ausgeben
echo ("<p>Datum:" . $datum . "</p>");
echo ("<p>Bergfest:" . $bergfest . "</p>");

// nun die Wenn-Dann-Sonnst Abfrage um das Bergfest zu bestimmen
if ($datum == $bergfest )
    {
    echo ("<h1>Bergfest</h1>
        <p>Heute ist Bergfest! Die l&auml;ngste Wartezeit ist vorr&uuml;ber.</p>");
    }
    else {
    echo ("<h1>noch kein Bergfest</h1>
        <p>Heute ist noch kein Bergfest. Leider ist die l&auml;ngste Wartezeit noch nicht vorbei.</p>");
    }
?>
Vielen Dank!
 
Guten Abend,

das "Berfest" konnte ich dank PHP errechnen und eine Schleife einbauen:
PHP:
//Vordefinierte Werte
    $datum = date("d.m.Y");            // Aktuelles Datum
    $zeit = date("H:i:s");            // Aktuelle Uhrzeit
    $erst = strtotime("22.09.2010");    // Datum erster Kontakt
    $ziel = strtotime("27.12.2010");    // Datum des Treffen

// errechnen wann Bergfest ist
    // 60sec * 60min * 24h = 86400sec Tag
    
    $tage = ((($ziel - $erst) / 86400) / 2);
    
    $bergfest = date("d.m.Y", strtotime("+ " .(int) $tage ." days", $erst));

// Ausgeben des Datum und Zeit des Webseiten Besuches. Und nennung wann Bergfest ist.
echo ("<small><p align=\"center\">Die Seite wurde am " . $datum ." um " . $zeit . " aufgerufen. Unser erster Kontakt auf einer Internetseite war am " . date("d.m.Y", $erst) . ".<br />Diesen Tag habe ich gew&auml;hlt, um den Zeitpunkt des Bergfestes zu errechnen. Bergfest ist am " . $bergfest . ".</p></small>");

// nun die Wenn-Dann-Sonnst Abfrage um das Bergfest zu bestimmen
if ($datum == $bergfest )
    {
    echo ("<h1>Bergfest</h1>
        <p>Heute ist Bergfest! Die l&auml;ngste Wartezeit ist vorr&uuml;ber.</p>");
    }
    else {
    echo ("<h1>Berfest ist noch nicht erreicht</h1>
        <p>Der normale Counter wird hier eingebunden.</p>");
    }
Nun bleibt aber noch ein Problem mit dem JavaScript. Die Ausgabe des Counter wird mit einem input gemacht:
HTML:
<form name=\"countdownform\">
<p><input size=\"75\" name=\"countdowninput\"></p>
</form>
Dies würde ich gerne in ein DIV oder span ändern, um den Text dann besser Formartieren, Ausrichten usw. zu können. Ist dies Möglich? Wenn ja, wie?

Vielen Dank
Muckel
 
Da kann man nur nochmal die Antwort von spicelab zitieren
Man bediene sich z.B. getElementById(), um das HTML-Element im Markup anzusprechen, und seinen Inhalt mittels innerHTML reinzuschreiben.

Naja, ich bin ja nicht so gemein :-D

Also ersetze folgendes JavaScript (kommt zwei mal vor)
Javascript:
document.countdownform.countdowninput.value=
durch
Javascript:
document.getElementById("countdown_output").innerHTML=

Und folgendes HTML
HTML:
<form name=\"countdownform\">
<p><input size=\"75\" name=\"countdowninput\"></p>
</form>
durch
HTML:
<div id="countdown_output"></div>
 
Guten Abend,

Ersteinmal vielen vielen Dank für Deine Hilfe! Den ersten Countdown konnte ich als einfache html Datei einbinden. In der Zukunft werde ich aber öfter welche benutzen, die ich in ein Wordpress-Blog integrieren möchte / muss. So zum Beispiel Countdowns zu Veranstaltungen einer Jugendgruppe. Das JavaScript habe ich schon in eine Datei ausgelagert, was auch klappt.

Dank Ergebnissen der Suchmaschine lässt sich das ja einfach einbinden und der Script-Bereich muss nicht unbedingt im head stehen:
Code:
<script type="text/javascript" language="JavaScript" src="Pfad/zur/Datei/counter.js"></script>
Doch ein Problem macht das onload im body-Tag. Denn ich kann nicht jedesmal die Template Dateien des Blogs bearbeiten, wenn ich einen Counter einbinden muss. Gibt da noch eine Möglichkeit, dass man dies ändern kann? In der Beschreibung bei selfhtml konnte ich dazu leider keine Information finden. Auch auf anderen Seiten konnte ich keine direkten Lösungen finden. Habe lediglich diesen Ansatz gefunden:
irgendwo im Body folgendes einfügen
Code:
<script type="text/javascript">
deineFunktion(); // deine Funktion aufrufen
</script>
Sollte klappen so...
Soweit ich es verstanden habe, lädt man durch onload etwas, sobald alle Inhalte geladen sind. Da der Counter dort erscheinen soll, wo das DIV ist, könnte man dann etwas direkt aufrufen? Oder ist das onload auch für die Aktualisierung verantwortlich? Wenn dem so ist, fand ich die Erklärungen, dass dadurch z.B. ein Fenster geladen wird, nicht so vorteilhaft.

Vielen Dank für eure Hilfe(n)
Muckel
 
der Script-Bereich muss nicht unbedingt im head stehen
Es wird aus Performance Gründen sogar empfohlen, jegliches JavaScript an den Fuß der Seite zu setzen.

Du kannst das onLoad Ereignis des bodys auch ansprechen, ohne es in dein HTML zu schreiben.
Javascript:
window.onload = function() {
    countdown();
};

Damit würdest du aber eventuell andere Funktionen überschreiben. Also merk dir vorher, was in window.onload drin stand und ruf es dann nochmal auf.

Javascript:
var fn = window.onload;
window.onload = function() {
    fn();
    countdown();
};

Jetzt musst du in den Blog jeweils nur die eine Zeile HTML einfügen (<div id="countdown_output"></div>) und dein externes JavaScript (mit dem window.onload Kram am Ende angefügt).

Man könnte auch das Skript unmittelbar nach dem Div platzieren und sich den weg über window.onload sparen. Aber was ist dir wichtiger:
1.Dass dein Countdown möglichst sofort erscheint und alles andere warten muss
2.oder sich die Seite für den Benutzer ganz normal (schnell) läd und dann erst dein Counter erscheint?
 
Zuletzt bearbeitet:
Moin moin,

am wichtigsten ist schon, dass die Seite vernüftig lädt und nicht unbedingt der Countdown. Problem ist eben nur, wenn ich möchte das auch andere Autoren in dem Blog einen erstellen können, dass es dann klappen muss ohne den body-Tag zu benutzten. Durch die Autor-Schnittstelle in der Blogsoftware kann man zwar auch html schreiben, doch all das wird in einem DIV in Mitten der Seite dargestellt - eben dort, wo der Artikel steht.

Das ist das ganze Problem dahinter.

Werde deine Lösung heute noch testen. Vielleicht funktioniert es dann ja. Und da die Seite für die ich das hauptsächlich benötige nur von den Gruppenmitgliedern und deren Angehörigen aufgerufen wird, ist die Schnelligkeit nicht ganz so wichtig - solange es sich nicht zu lange verzögert.

Oder gibt es einen besseren Ansatz für einen Countdown?

Liebe Grüße und vielen Dank
Muckel
 
Hallo zusammen,

habe das nun getestet. Das von Dir gezeigte JavaScript gehört doch zu dem übrigen JavaScript, eben an dessen Ende oder? Also kann ich es mit in der Datei auslagern? Dies habe ich gemacht. Danach das onload aus dem body entfernt und das script am Ende der Seite aufgerufen:
HTML:
<body>
<h1>Countdown zu einem sch&ouml;nen Treffen</h1>
<p>Es wird die Zeit kommen, da sich zwei Menschen treffen werden. Es kann vieles daraus entstehen. Liebe, eine Partnerschaft, eine Freundschaft oder nur sch&ouml;ne Tage. Doch gleich was sich ergibt, es wird sicherlich eine hamonische Zeit f&uuml;r beide Beteiligten.</p>
    <!-- <form name="countdownform"><p><input size="75" name="countdowninput"></p></form> -->
    <div id="countdown_output"></div>
    <script type="text/javascript" language="JavaScript" src="counter.js"></script>
</body>
Und das JavaScript in der ausgelagerten Datei wurde am Ende nur von Deinem Beispiel ergänzt:
Code:
// Ziel-Datum in MEZ

    var jahr=2010, monat=12, tag=27, stunde=15, minute=00, sekunde=00;
    var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);

    function countdown() {
    startDatum=new Date(); // Aktuelles Datum

// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
    if(startDatum<zielDatum)  {

    var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;

// Jahre
    while(startDatum<zielDatum) {
    jahre++;
    startDatum.setFullYear(startDatum.getFullYear()+1);
    }
    startDatum.setFullYear(startDatum.getFullYear()-1);
    jahre--;

// Monate
    while(startDatum<zielDatum) {
    monate++;
    startDatum.setMonth(startDatum.getMonth()+1);
    }
    startDatum.setMonth(startDatum.getMonth()-1);
    monate--;

// Tage
    while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
    tage++;
    startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
    }

// Stunden
    stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
    startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);

// Minuten
    minuten=Math.floor((zielDatum-startDatum)/(60*1000));
    startDatum.setTime(startDatum.getTime()+minuten*60*1000);

// Sekunden
    sekunden=Math.floor((zielDatum-startDatum)/1000);

// Anzeige formatieren
    (jahre!=1)?jahre=jahre+" Jahre,  ":jahre=jahre+" Jahr,  ";
    (monate!=1)?monate=monate+" Monate,  ":monate=monate+" Monat,  ";
    (tage!=1)?tage=tage+" Tage,  ":tage=tage+" Tag,  ";
    (stunden!=1)?stunden=stunden+" Stunden,  ":stunden=stunden+" Stunde,  ";
    (minuten!=1)?minuten=minuten+" Minuten  und  ":minuten=minuten+" Minute  und  ";
    if(sekunden<10) sekunden="0"+sekunden;
    (sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";

    // document.countdownform.countdowninput.value=
    document.getElementById("countdown_output").innerHTML=
    jahre+monate+tage+stunden+minuten+sekunden;

    setTimeout('countdown()',200);
    }
// Anderenfalls alles auf Null setzen
    // else document.countdownform.countdowninput.value=
    else document.getElementById("countdown_output").innerHTML=
    "0 Jahre,  0 Monate,  0 Tage,  0 Stunden,  0 Minuten  und  00 Sekunden";
    }
// Aufrufen der aktualiesierung anstelle des body onload
    var fn = window.onload;
    window.onload = function() {
        fn();
        countdown();
    };
Leider gibt es irgendwo einen Fehler oder ich habe etwas nicht richtig verstanden. Denn nun wird leider kein Countdown mehr angezeigt.

LG Muckel
 

Neue Beiträge

Zurück