 25. Juli 2007 - 75 Jahre Verkehrsampel
Images zeitgesteuert tauschen (abhängig vom Sekundenwert). Hier umgesetzt als Schaltung einer Lichtzeichenanlage mit einer Erweiterung: Verkehrsampel mit Restzeitanzeige
In Hamburg gabs 2006 die ersten Restrot-Leuchtsignale, die den Autofahrern mit einem Countdown die verbleibende Zeit bis zur freien Fahrt anzeigen - und umgekehrt die Restzeit der Grünphase bis zum Umspringen auf Rot. Bei dem Pilotprojekt sollte untersucht werden, ob die 50 mal 50 Zentimeter großen Boxen mit den 26 mal 26 Zentimeter messenden Sekundenziffern den Verkehrsfluss beschleunigen und die Sicherheit an der belebten Kreuzung erhöhen. Die Experten stritten drarüber, ob die neue Technik wirklich nötig und sinnvoll ist.
Einer meiner Versuche mit JavaScript Grafiken zeitabhängig auszutauschen. Möglicherweise findet dieses Beispiel Anwendung auf einer Fahrschulseite oder sie 'bauen es um' und verwenden es für eine F1-Fanclub-Homepage oder eine Seite für Eisenbahnfreunde. Dann benötigen sie natürlich andere Grafiken.
So funktioniert der Bildtausch
Eigentlich nichts anderes als eine Abfrageschleife, die den Sekundenwert der Rechnerzeit überprüft. Abhängig vom festgestellten Wert wird die Datenquelle (src) der angezeigten Grafik (id="Ampel") mit document.getElementById("Ampel").src entsprechend festlegt.
Schema:
if (SekundenJetzt > 28 && SekundenJetzt < 32)
document.getElementById("Ampel").src = AlleAmpeln[1].src;
Wenn der Sekundenwert größer als 28 und kleiner als 32 ist, dann entnehme aus dem Register 'AlleAmpeln' die URL-Angaben für die rot-gelbe Ampel. Für das Element mit der ID 'Ampel' gilt dann:
document.getElementById("Ampel").src = "images/ampel-rot-gelb.jpg"
So funktioniert die Restzeitanzeige
Innerhalb von if-Abfragen wird der Sekundenwert der Systemzeit dazu benutzt in einer mathematischen Rechenoperation den Wert für die Restzeit zu ermitteln. Der Wert wird in einem 'unsichtbaren' Formularfeld (id="Sec") angezeigt. Dieser Wert wird jede Sekunde mit document.getElementById("Sec").value aktualisiert.
Ich entnehme der Rechnerzeit den Sekundenanteil ...
var SekundenJetzt = ZeitJetzt.getSeconds();
... und durchlaufe unterschiedliche Abfragen. Beispiel
if (SekundenJetzt < 33)
Verbleibend = 33 - SekundenJetzt;
Den Wert für die verbleibende Zeit schreibe ich in das Formularfeld
document.getElementById("Sec").value = Verbleibend;
verwendete Grafiken
Ich benutze die in Deutschland übliche Phasenabfolge mit vier Signalisierungszuständen und entsprechend 4 Grafiken, die sie durch Rechtsklick herunterladen und verwenden dürfen.
   
|
   
alternative Grafiken |
   
alternative Grafiken |
|
WWW.WEB-TOOLBOX.NET
QuellCode 
ZURÜCK