[FRAGE] Counter zählen mit <p>

[LikeStar]

Hallo Community,

finde über das World Wide Web keinen geeigneten Code.
Ich suche ein Script, welches die Zahl 5, in einem <p>
runter zählen lässt.

Die Zahl 5 soll langsam runter gezählt werden.

<p>wird in 5 Sekunden</p>

Irgend Jemand eine Idee? : - )

 

[Sempervivum]

Versuch mal, um die 5 ein <span> mit einer ID zu legen, dann kannst Du mit document.getElementById() und innerHTML darauf zugreifen. Außerdem brauchst Du die Funktionen setInterval() und clearInterval().
Die Skripts, die man so findet, basieren wohl fast alle darauf, dass man einen Countdown bis zu einem Datum realisiert, wahrscheinlich bist Du deshalb nicht fündig geworden.

 

[LikeStar]

Danke für deine Antwort. Verstehe, du meinst wegen der Id

document.getElementById()

Könnte klappen.

 

[Sempervivum]

Genau, versuch mal, selber die Lösung zu erarbeiten. Zu den Funktionen wirst Du Infos im Web finden. Z. B. bei SelfHTML.

 

[LikeStar]

@Sempervivum,

okay hat geklappt. Das mit dem <span id="">5</span>
war die Lösung.



Edit: Kann ein Trigger / Function eigentlich am Anfang gestoppt werden.
Und per Klick wieder gestartet werden?

Habe früher Starcraft 2 Maps gescripted, aber wahrschienlich hat das
nicht sonderlich viel mit Javascript zu tun.

 

[Sempervivum]

Mit "Trigger / Function" meinst Du wahrscheinlich einen Timer, den man mit setInterval() anlegt. Nein, anhalten und wieder starten kann man diesen nicht. Man müsste ihn löschen und später einen neuen anlegen.

 

[LikeStar]

<script type="text/javascript">
   (function(){
	var output = document.getElementById("countdown");
	output.innerHTML = 6;
	var endTime = (new Date()).getTime() + 6000;
	var interval = window.setInterval(function(){
		var diff = endTime - (new Date());console.log(diff);
		if (diff <= 0){
			window.clearInterval(interval);
			output.innerHTML = 0;
			// tu irgend was
		}
		else {
			output.innerHTML = Math.ceil(diff / 1000);
		}
	}, 200);
}());
</script>

Das Script soll erst in 6 Sekunden gestartet werden. Wie geht das?

 

[mikdoe]

Das Script soll erst in 6 Sekunden gestartet werden. Wie geht das?

Verstehe ich jetzt nicht ganz, du hast doch das dafür benötigte Kommando setInterval() schon im Code drin, das brauchst du doch einfach nur zusätzlich noch außen rum oder um den Aufruf zu legen mit dem Wert 6000, weil das immer in Millesekunden angegeben wird.

 

[Sempervivum]

Und dieses Skript funktioniert? Ich sehe folgende Probleme:
1. In der Form wird das Skript sofort ausgeführt; wenn Du es im Head notierst, ist das span-Element noch nicht definiert und es kommt zu einem Fehler bei der Ermittlung der Variablen output.
2. Bei der Berechnung von endTime wendest Du richtig getTime() auf new Date() an. Bei der Berechnung der Differenz tust Du das jedoch nicht --> es wird ein Date-Objekt von einem nummerischen Wert subtrahiert.
Edit: Ich sehe, es funktioniert tatsächlich, wenn man das Skript an das Ende schreibt. Offenbar ist Javascript so intelligent, dass es bei der Berechnung der Differenz automatisch den Typ konvertiert.