JavaScript-Counter

Hier finden Sie einen Counter der die Stunden, Minuten und Sekunden von einer vorher festgelegten Zeit abzählt.

Demo



03:24:11

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<span id="counter">03:24:11</span>

<script>
function Counter() {
 // Counter einlesen
 var obj = document.getElementById("counter").firstChild;
 var zeit = obj.nodeValue;

 // Counter abzählen
 var zsplit = zeit.split(":");
 var stunde = zsplit[0];
 var minute = zsplit[1];
 var sekunde = zsplit[2];
 if (sekunde > 0) {
  sekunde--;
 }
 else {
  minute--;
  sekunde = "59";
 }
 if (minute >= 0) {
  if (minute.length < 2) {
   minute = "0" + minute;
  }
 }
 else {
  stunde--;
  minute = 59;
 }
 if (stunde >= 0) {
  if (stunde.length < 2) {
   stunde = "0" + stunde;
  }
 }
 zeit = stunde + ":" + minute + ":" + (sekunde < 10 ? "0" : "") + sekunde;

 // Überprüfen ob der Counter auf "00:00:0" steht
 if (stunde < "01" && minute < "01" && sekunde < "1") {
  // Counter beenden
  window.clearInterval(aktiv);
  // Hier kann bsw. eine neue Funktion gestartet werden
 }

 // Counter ausgeben
 var obj = document.getElementById("counter").firstChild;
 obj.nodeValue = zeit;
}

// Counter starten
var aktiv =  window.setInterval("Counter()", 999);
</script>

Die Zeitangabe tragen Sie bei <span id="counter">03:24:11</span> ein.

Tipps

Berechnungen mit dem Datum
Feiertage, Mondphase, Wochentag, Sonnenaufgang und Sonnenuntergang, Julianisches Datum, Sternzeichen, ...
Suchanfrage an eine Datenbank über AJAX senden und empfangen
Ohne das die Seite neu geladen werden muss, kann man über JavaScript eine Suchanfrage an eine PHP-Datei senden (die dann eine DB-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt.
Checkbox (Mehrfachauswahl) und DB-Ausgabe
Mit den Checkboxen lassen sich mehrere Einträge von der DB-Tabelle auswählen, auswerten und ausgeben.
Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren
Dieses Beispiel zeigt, wie man eine HTML-Auswahlliste (Drop-Down-Liste) dynamisch generiert, die auf den Werten einer Spalte in einer Datenbank-Tabelle beruht.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.