• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zweilzeilig möglich?

Status
Für weitere Antworten geschlossen.
Loon3y

Loon3y

Neues Mitglied
Hallo...

mal wieder nervende fragen.... *urgs*..endschuldigt.

Ich habe mir jetzt via JS einen "countdown" gebastelt, der die Zeit zählt wie lange es zum Datum XX noch dauert.

Der code teilt sie wie folgt auf:

countdown.htm

Code: 
<html>
  <head>
    <title>Datum-Countdown mit JavaScript</title>

<script src="countdown.js" type="text/javascript" />

  </head>

  <body onload="countdown()">
    <form name="countdownform">
      <p>
        <input size="75" name="countdowninput">
      </p>
    </form>

  </body>

</html>
und countdown.js

Code: 
      // Ziel-Datum in MEZ
      var jahr=2008, monat=6, tag=3, stunde=21, minute=04, 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 = !jahre ? '' : jahre + (jahre > 1 ? " Jahre": " Jahr") + ' , ';
        monate = !monate ? '' : monate + (monate > 1 ? " Monate": " Monat") + ' , ';
        tage = !tage ? '' : tage + (tage > 1 ? " Tage": " Tag") + ' , ';
        stunden = !stunden ? '' : stunden + (stunden > 1 ? " Stunden": " Stunden") + ' , ';
        minuten = !minuten ? '' : minuten + (minuten > 1 ? " Minuten": " Minuten") + ' , ';
        sekunden = !sekunden ? '' : sekunden + (sekunden > 1 ? " Sekunden": " Sekunden");

          document.countdownform.countdowninput.value=
              jahre + monate + tage + stunden + minuten + sekunden;

          setTimeout('countdown()',200);
        }

}
Meine Frage nun:

Ist es möglich, den Countdown 2-zeilig anzeigen zu lassen und ohne diesen unförmigen rahmen? Sprich einfach so:

Jahr, Monat, Tag
Stunde, Minute, Sekunde

natürlich damit verbunden, wenn es keine Jahre mehr dauert, dann einfach "0 Jahre". Aber das ist ja logisch..

Gruß
Loon3y
 
Mach das Input (samt Formular) im Quelltext weg und ersetz es durch
Code: 
<div id="countdown">&nbsp;</div>
Und ersetze im JavaScript folgende Zeilen:
Code: 
document.countdownform.countdowninput.value=
    jahre + monate + tage + stunden + minuten + sekunden;
Durch folgende:
Code: 
document.getElementById('countdown').innerHTML =
   jahre + monate + tage + "<br />" + stunden + minuten + sekunden
Nicht getestet, sollte aber gehen.
 
Wie meinst du es mit "Samt Formular" ?

habe jetzt:

countdown.html:

Code: 
<html>
  <head>
    <title>Datum-Countdown mit JavaScript</title>

<script src="countdown.js" type="text/javascript" />

  </head>

<body>

  <div id="countdown">&nbsp;</div>

</body>

</html>
und countdown.js

Code: 
      // Ziel-Datum in MEZ
      var jahr=2008, monat=6, tag=3, stunde=21, minute=04, 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 = !jahre ? '' : jahre + (jahre > 1 ? " Jahre": " Jahr") + ' , ';
        monate = !monate ? '' : monate + (monate > 1 ? " Monate": " Monat") + ' , ';
        tage = !tage ? '' : tage + (tage > 1 ? " Tage": " Tag") + ' , ';
        stunden = !stunden ? '' : stunden + (stunden > 1 ? " Stunden": " Stunden") + ' , ';
        minuten = !minuten ? '' : minuten + (minuten > 1 ? " Minuten": " Minuten") + ' , ';
        sekunden = !sekunden ? '' : sekunden + (sekunden > 1 ? " Sekunden": " Sekunden");

        document.getElementById('countdown').innerHTML =
         jahre + monate + tage + "<br />" + stunden + minuten + sekunden

          setTimeout('countdown()',200);
        }

}
kommt ein weißes blatt wenn ich es im mozilla öffne...also nothing to see... hm.

beziehen "div's" nicht ihre daten aus css oder geht es ebenso aus .js-dateien ?
 
Ein div ist für CSS, JavaScript etc. ein HTML-Element wie (fast) jedes andere, das spielt keine Rolle (zumal CSS mit Inhalt herzlich wenig zu tun hat).

Mit "samt Formular" meinte ich, dass du das sowohl das Eingabefeld, als auch das Umgebende Formular (<form>...</form>) entfernen kannst.

Das ganze funktioniert übrigens wunderbar, du hast nur den Funktionsaufruf auch entfernt, der muss wieder rein:
Code: 
<body onload="countdown()">
 
dummer fehler meinerseits, endschuldige.

Jetzt muss nurnoch wieder, da ich es schon vor langer zeit rausgenommen habe, hin, dass 0 Jahre, 0 Monate, .... angezeigt wird, sofern diese Werte nicht benutzt werden.

Davor hatte ich es zwar funktionierend, aber es war irgendwie unlogisch..
 
solange es so geht wie man es will und gut aussieht..passt es auch ^^ allerdings soll dieser countdown + zusätzl. textliches in ein div hinein...soll ich dann so sachen wie größe usw auch in diese .js datei schreiben?

und..wie bekomme ich hin, wenn ein werft 0 ist, das dann z.b. 0 Jahre dortsteht?
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben