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

Countdown auf "schwarze Blöcke"

W

woagen

Neues Mitglied
Hallo Forum,

ich hoffe das ich hier überhaupt richtig bin, denn ich weiß ehrlich gesagt nicht, ob das ganze mit javascript oder php oder sogar mit flash gemacht werden muss. :oops:

Ich möchte gerne einen Countdown auf einer Webseite haben. Das würde ich ja sogar noch ganz leicht hinbekommen.
Doch ich hätte das ganze gerne etwas anschaulicher. Da ein Bild mehr als 1000 Worte sagt, habe ich auch eine kleine "Vorlage" erstellt, wie es am Ende aussehen sollte.
Ich habe das ganze mal hochgeladen. Ich habe auch schon längere Zeit mit Googeln verbracht - leider ohne richtigen erfolg.

Danke für eure Hilfe!


Vorlage
http://i.imgur.com/fxwVZ.png
 
Der Countdown selbst muss über client-seitige Scripts (JavaScript oder Flash) laufen wenn die Zahlen sich beim Betrachten im Browser verändern sollen. Andernfalls (php, perl etc.) würden sich die Zahlen nur beim Neuladen der Seite ändern, was bei Countdowns eher unüblich ist.

Countdown-Scripts für JavaScript sollte man über eine Suchanfrage bei einer Suchmaschine deiner Wahl schnell finden. Ist nicht sehr schwierig.

Die Gestaltung (schwarz auf weiß) wird per CSS erledigt.
 
threadi schrieb:
Countdown-Scripts für JavaScript sollte man über eine Suchanfrage bei einer Suchmaschine deiner Wahl schnell finden. Ist nicht sehr schwierig.
Zum Vergrößern anklicken....

Ja, nur da ich jetzt nicht so der Coder bin, gibt es ein für mich größeres Problem.
Wenn ich nun ein Script aus Google.de nehme, dann steht halt im Produkt;

22 Stunden, 55 Minutenn [...] wie bekomme ich nun nur die Stunden auf einen dieser schwarzen "Kästen"?!

Hat niemand einen Code für mich?!:oops:
 
threadi schrieb:
Welche Code nimmst Du genau? Den kann man sicher in der Ausgabe anpassen...
Zum Vergrößern anklicken....

Wie man sowas halt coden könnte. weil wenn man mir schreibt ja einfach nen script bei google suchen und dann mit css anpassen, da ist mir jetzt als nichtcoder überhaupt nicht geholfen.
wäre ja so als ob man in mathe bei einen neuen thema sagen würde: einfach ausrechnen ;)
 
HTML: 
    <script language="JavaScript">
      // Ziel-Datum in MEZ
      var jahr=2011, monat=6, tag=1, stunde=00, 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
          (monate!=1)?monate=monate+"   ":monate=monate+"   ";
          (tage!=1)?tage=tage+"   ":tage=tage+"    ";
          (stunden!=1)?stunden=stunden+"   ":stunden=stunden+"   ";
          (minuten!=1)?minuten=minuten+"   ":minuten=minuten+"   ";
          if(sekunden<10) sekunden="0"+sekunden;
          (sekunden!=1)?sekunden=sekunden+"    ":sekunden=sekunden+"    ";

          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()">
    <form name="countdownform">
      <p>
        <input size="75" name="countdowninput">
      </p>
    </form>
  </body>

Den Code habe ich aus Google. Jetzt sollten aber nur die Zahlen halt jeweils auf diese schwarzen Kästen.
Und da versage ich ;)
 
Ersetze im HTML-Bereich

Code: 
<form name="countdownform">
      <p>
        <input size="75" name="countdowninput">
      </p>
    </form>

durch

Code: 
<p id="countdown">
 <span id="jahre"></span>
 <span id="monate"></span>
</p>

Ersetze

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

durch

Code: 
document.getElementById("jahre").innerHTML = jahre;
	  document.getElementById("monate").innerHTML = monate;

und

Code: 
// Anderenfalls alles auf Null setzen
        else document.countdownform.countdowninput.value=
            "0 Jahre,  0 Monate,  0 Tage,  0 Stunden,  0 Minuten  und  00 Sekunden";

durch

Code: 
// Anderenfalls alles auf Null setzen
        else {
	  document.getElementById("jahre").innerHTML = "0";
	  document.getElementById("monate").innerHTML = "0";
	}

und füge noch einen Style für die Zahlen in deine CSS-Datei ein:

Code: 
p#countdown span {
	display: block;
	float: left;
	background-color: #000;
	color: #fff;
	padding: 6px;
	margin: 0 4px 0 0;
      }

Dann solltest Du die Jahre und Monate bis zum Ende in schwarzen Blöcken sehen können. Die Ausgabe der Tage, Stunden, Minuten und Sekunden wäre dann analog, das solltest Du mit dieser Anleitung schon selbst hinbekommen.
 
Hallo Woagen,
Lege für jede Ziffer ein span an, Zehner und Einer getrennt, z. B. für die Sekunden:
Code: 
<span id="zsek" class="zsek"></span><span id="esek" class="esek"></span>
Formatiere die spans mit CSS so, dass Du weiße Schrift auf schwarzem Grund bekommst.
Im Javascript lass dies weg:
Code: 
[COLOR=#000080]          // Anzeige formatieren           (monate!=1)?monate=monate+"   ":monate=monate+"   ";           (tage!=1)?tage=tage+"   ":tage=tage+"    ";           (stunden!=1)?stunden=stunden+"   ":stunden=stunden+"   ";           (minuten!=1)?minuten=minuten+"   ":minuten=minuten+"   ";           if(sekunden<10) sekunden=[COLOR=#0000ff]"0"[/COLOR]+sekunden;           (sekunden!=1)?sekunden=sekunden+"    ":sekunden=sekunden+"    ";
            document.countdownform.countdowninput.value=               jahre+monate+tage+stunden+minuten+sekunden; [/COLOR]
und trage dort die Einer und die Zehner in die spans ein:
Code: 
document.getElementBy Id ("zsek").innerHTML = sekunden / 10;
document.getElementBy Id ("esek").innerHTML = sekunden % 10;
Analog für die anderen Werte.
Viel Erfolg und viele Grüße - Ulrich
Ups, da war Threadi schneller.
 
ich bedanke mich, den rest bekomm ich wohl noch hin

edit: bin ich jetzt total doof? ich mach es genauso wie threadi, aber bekomme nun gar nichts mehr angezeigt O.o
 
Zuletzt bearbeitet:
Dann hast Du etwas anders gemacht als ich gesagt hatte. Vlt. schaust Du mal in die JavaScript-Konsole was die dazu sagt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben