Webseite Countdown -

[Felix]

Hallo zusammen,

Ich weiß nicht wer von euch die Serie "How I Met Your Mother" kennt, aber darin kommt die "slapcountdown"-Webseite vor.
Für die, die es nicht kennen:
slapcountdown - YouTube

Jetzt hat ein Freund von mir auch eine "Ohrfeigen"-Wette verloren und ich dachte mir ich mache auch schnell (<- hat sich wohl erledigt -.-) so eine Webseite.

Okay.
Bei 1&1 Webseite bestellt.
Countdown-Code gegoogelt.
Webseite erstellt und bearbeitet.

Das ganze sieht jetzt so aus: www.slap-countdown.de
Ich hab den HTML-Code und das JAVA-Script angehängt, dass verwendet wird.

Das passt soweit, doch ich möchte wenn der Countdown abgelaufen ist, dass ein Satz oder Wort erscheint.
Im Moment ist es so, dass der Countdown dann einfach weiter rückwärts zählt..

Kann mir jemand helfen?
Wäre echt super! =)

Vielen Dank schon mal in vorraus.
mfg
Felix

 

[threadi]

Zunächst: Du hast deinen Beitrag unter HTML gepostet, hast aber eine Frage zu JavaScript. Daher habe ich deinen Beitrag nach JavaScript verschoben.

Leider geht der Link zu deiner Seite nicht?! Das wäre interessant um das ganze mal in Bewegung zu sehen.

 

[Felix]

Hey,

Okay, ich dachte das gehört eher in den HTML-Bereich..
Dann erstmal vielen Dank.

Ich habe den Link der Webseite geändert - jetzt stimmt er ;-)
Außerdem ist im ersten Post ja der Code als .txt angehängt.

Hoffe jetzt passt alles und ihr könnte mir weiterhelfen.

mfg
Felix

 

[threadi]

Wenn ich das richtig sehe müsste man hier

if (this.CountActive) setTimeout(this.obj +".CountBack(" + (secs-1) + ")", 990);

prüfen, ob secs einen Wert größer/gleich 0 hat. Wenn nicht, dann ist der Countdown beendet und man könnte dann irgendetwas anderes anzeigen, was auch immer Du willst.

if (this.CountActive) {
 if( secs-1 >= 0 ) {
  setTimeout(this.obj +".CountBack(" + (secs-1) + ")", 990);
 }
 else
 {
  alert("Irgendetwas anderes");
 }
}

Btw. ist der HTML-Code deiner Seite fehlerhaft. Da selbst der Counter auf fehlerhaften HTML-Code aufbaut, kann es sein, dass einzelne Browser mit der Anzeige Probleme haben.
http://validator.w3.org/check?verbose=1&uri=http://www.slap-countdown.de/

 

[Felix]

Hey,

Ich habe die Webseite jetzt auf Google Chrome, Internet Explorer und Firefox getestet - sie wird überall fehlerfrei angezeigt?! :?
Aber ich werde den Code trotzdem noch einmal überprüfen^^

Erstmal danke für deine Hilfe aber das ist jetzt nicht ganz so, wie ich mir das vorgestellt habe:
Sobald der Countdown auf 0 geht, erscheint aber ein Fenster in dem der Text steht.

Im Moment sieht es so aus:

Ich möchte aber anstatt des roten Countdowns einen Wort in selben Fenster (am besten in der selben Größe/Farbe) angezeigt haben.

Sollte das nicht gehen, kann ein Text darunter auftauchen und der Countdown auf 0 stehen bleiben?


mfg
Felix

 

[threadi]

Wie gesagt: du musst die alert()-Ausgabe durch etwas anderes ersetzen. Beispielsweise statt dessen ein anderes, vorher ausgeblendetes Element einblenden.

document.getElementById("neuertext").style.display = "block";

Per JavaScript kannst Du dann auch den Countdown selbst ausblenden.

 

[Felix]

Hallo,

Tut mir Leid, ich bin nicht mehr ganz so fit in HTML.
Sorry also, wenn ich mich etwas dumm anstelle..


Also der Code sieht jetzt momentan so aus:

function countdown(obj){
    this.obj        = obj;
    this.Div        = "clock";
    this.BackColor        = "white";
    this.ForeColor        = "black";
    this.TargetDate        = "03/04/2012 3:00 PM";
    this.DisplayFormat    = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
    this.CountActive    = true;
    
    this.DisplayStr;


    this.Calcage        = cd_Calcage;
    this.CountBack        = cd_CountBack;
    this.Setup        = cd_Setup;
}


function cd_Calcage(secs, num1, num2)
{
  s = ((Math.floor(secs/num1))%num2).toString();
  if (s.length < 2) s = "0" + s;
  return (s);
}
function cd_CountBack(secs)
{
  this.DisplayStr = this.DisplayFormat.replace(/%%D%%/g,    this.Calcage(secs,86400,100000));
  this.DisplayStr = this.DisplayStr.replace(/%%H%%/g,        this.Calcage(secs,3600,24));
  this.DisplayStr = this.DisplayStr.replace(/%%M%%/g,        this.Calcage(secs,60,60));
  this.DisplayStr = this.DisplayStr.replace(/%%S%%/g,        this.Calcage(secs,1,60));


  document.getElementById(this.Div).innerHTML = this.DisplayStr;
if (this.CountActive) {
 if( secs-1 >= 0 ) {
  setTimeout(this.obj +".CountBack(" + (secs-1) + ")", 990);
 }
 else
 {
  alert(document.getElementById("test123?").style.display = "block");
 }
}
}
function cd_Setup()
{
    var dthen    = new Date(this.TargetDate);
      var dnow    = new Date();
    ddiff        = new Date(dthen-dnow);
    gsecs        = Math.floor(ddiff.valueOf()/1000);
    this.CountBack(gsecs);
}

Wenn der Countdown jetzt durchgelaufen ist, bleibt er zwar steht und aktualisiert sich nicht
mehr von selber - aber wenn man die Seite neu lädt, geht er trotzdem ins negative.
Die alert()-Ausgabe "test123?" wird aber auch nicht angezeigt..

Das ganze sieht so aus:

[FONT=Verdana, Arial, Tahoma, Calibri, Geneva, sans-serif]
[/FONT]

threadi du scheinst dich sehr gut auszukennen, wärst du so Lieb mir den Code zu machen?
Weiß nicht ob ich das selber hinbekomme.

mfg
felix

 

[threadi]

Das ist falsch:

  alert(document.getElementById("test123?").style.display = "block");

Richtig wäre

alert("ausgabetext in einem schnöden fenster");

oder

document.getElementById("test123").style.display = "block";

wobei bei letzterem natürlich auch ein Element mit der ID test123 in deinem HTML-Code vorhanden sein muss. Also z.N.:

<p id="text123">irgendein text</p>

Dieses Element kannst Du dann noch per CSS so gestalten und positionieren wie Du es dir wünschst.

Die hier besprochenen Techniken haben nur am Rande mit HTML zu tun. JavaScript und CSS sind jeweils völlig andere, aber auch für Webseiten wichtige Sprachen.

Wenn Du das jemanden für dich erledigen lassen möchtest, wende dich an die Jobbörse.

 

[Felix]

Super, vielen Dank threadi!


Ich habe jetzt

alert(document.getElementById("test123?").style.display = "block");

durch

document.getElementById("slap").style.display = "block";

ersetzt und folgendes im HTML-Code geschrieben:

<p id="slap">BAAAAAM!</p>

Allerdings wird das "BAAAAAM!" jetzt einfach permanent angezeigt und taucht nicht auf, sobald der Zähler auf 0 ist..Und dieser bleibt auch nicht auf 0 stehen, sondern geht beim aktualisieren der Seite ins Negative.

 

[threadi]

Das Element musst Du per CSS ausblenden. Stichwort: display mit Wert none.

 

[Felix]

Jetzt habe ich im HTML-Code geschrieben:

<div id="hidden"><p id="slap">BAAAAAM!</p></div>

Und im CSS-Code:

#hidden {
display:none;
}

Nun wird "BAAAAAM!" nicht mehr angezeigt - gar nicht mehr, auch nicht nach Ablauf des Countdowns.
Es geschieht nichts.
Selbst beim manuellen aktualisieren der Webseite (und der Countdown zählt dann ins negative weiter)

Was mache ich falsch?

Ich habe die Webseite jetzt mal so gelassen, dann kannst du es dir anschauen.
slapcountdown - slapcountdown

 

[threadi]

Du hast CSS noch nicht verstanden. Du sollst die ID slap ausblenden, nicht irgendein neues Feld einfügen welches Du dann per JavaScript nicht mal bearbeitest.

 

[Felix]

Achso, sorry.
Jetzt hab ichs:

HTML:

<p id="slap">BAAAAAM!</p>

CSS:

[LEFT][COLOR=#3E3E3E]#slap {
[/COLOR][COLOR=#3E3E3E]display:none;
[/COLOR][COLOR=#3E3E3E]}
[/COLOR][/LEFT]

Jetzt wird unter dem Countdown nach Ablauf der Zeit "

BAAAAAM!" angezeigt!
Super vielen Dank!

Jetzt nur noch eine Kleinigkeit:
Wenn ich das Webseite aber jetzt neu lade, geht der Countdown wieder ins negative und der Text verschwindet.
Der Countdown sollte bei 0 stoppen und der Text da bleiben.

Ist da noch möglich?

Vielen vielen Dank auf jeden Fall schon mal ;-)​