Home - Programmieren - ActionScript und JavaScript: Countdown auf der Seite
Hinweis: Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich. Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren. [Druckansicht] [Als E-Mail senden] [Kommentar verfassen] Einführung Auf viele Community-Seiten ist es üblich, dass bestimmte Treffen o.ä. stattfinden. Natürlich ist es dabei wünschenswert, dass dies regelmäßig in Erinnerung gebracht wird, z.B. jedesmal wenn jemand die Startseite der Community betritt. Dies kann mittels eines sogenannten Countdowns, der die verbleibenden Zeit anzeigt. Dieser Artikel möchte zeigen wie sich so etwas recht leicht realisieren lässt, und das sowohl in ActionScript (Macromedia Flash) als in JavaScript. Dabei soll es zudem kompatibel zu älteren Versionen von Flash bzw. JavaScript sein. Im Text stehen verschiedene Codeschnipsel. Die Codeteile die jeweils nur in ActionScript bzw. JavaScript vorkommen dürfen, stehen in einer anderen Farbe (ActionScript = dunkelblau, JavaScript = dunkelgrün, rest = rot). Die Syntax von ActionScript ist die von JavaScript nämlich sehr ähnlich. Hier zuerst ein Beispiel in JavaScript: Der Countdown zeigt die verbleibende Zeit in Tagen, Stunden, Minuten und Sekunden. Wenn das angestrebte Datum schon vorbei ist, dann sehen Sie überall ein Minus-Zeichen und der Countdown zählt aufwärts. Ich möchte auch noch kurz anmerken, dass hier kein Gebrauch gemacht wurde von Tausendstel Sekunden. Der Grund ist recht einfach: die Framerate (die Anzahl der Bilder die ein Monitor pro Sekunde anzeigen kann) liegt weit unter 1000, wodurch der Zähler recht merkwürdige Sprünge machen würde. Das Script Sehen wir uns jetzt mal an wie das Grundgerüst der Funktion aussieht.
Anfangs definieren wir das Datum des Treffens (und speichern dies in der
Variable treffen, Sie können diese aber auch anders nennen) mit der
Funktion Date()1 (beachten Sie das Schlüsselwort new und die korrekte
Schreibweise von Date()).Sie können abzählen bis zur Tausendstel Sekunde exakt (wegen dem oben schon angesprochen Grund sollten Sie dies jedoch nicht tun, oder zumindest sollten Sie den Zählen nicht so anzeigen). Die Funktion braucht dann sechs Parameter (maximum, es können nämlich auch weniger sein) die in dieser Reihenfolge stehen müssen:
Am Ende wird mit ein Zeitinterval gestartet (dies bedeutet, dass die Funktion in regelmäßen Zeitabständen wiederholt wird). Hier unterscheidet sich die Syntax jedoch:
Für die ActionScript-Variante: Selektieren Sie in Flash in der linken Spalte das Text Tool (der große Buchstabe A). Bauen Sie jetzt ein Textfeld irgendwo in der Animation. Im Eigenschaftenfenster unten wählen Sie dann als Typ "dynamischer Text" und vergeben es einen Namen (z.B. "Uhr"). Für die JavaScript-Variante: Wenn Sie JavaScript verwenden möchten, dann haben Sie zwei Möglichkeiten: entweder Sie bauen die Uhr in ein Formularfeld2 oder ein anderes HTML-Element, wobei Sie dann mit dem JavaScript-Objekt node3 arbeiten müssen. Ich habe hier zwei Beispielcodes. Das erste ist ein Formularfeld, das andere ein SPAN-Element4.
Unten werde ich im Abschnitt "Code einbauen" nochmal näher darauf zurückkommen.
Sehen wir uns jetzt mal die Funktion selbst an. Der Code wurde hier in Teile zerlegt.
Wir verwenden hier wieder die Funktion Date(). Da dieser jetzt aber keine
Parameter bekommen hat, wird er einfach die aktuelle Systemzeit ermitteln und diese
in der Variable jetzt speichern.Diese wird dann verwendet um, jedesmal wenn die Funktion aufgerufen wird (im Sekundentakt), die verbleibende Zeit bis zum Treffen zu berechnen. Das berechnen machen wir dann auch gleich. Wir initializieren hier eine neue Variable rest, welche gleich treffen (Variable mit Datum und Zeit des Treffens, die schon am Anfang initializiert wurde) minus jetzt. Das Resultat ist der Unterschied in Tausendstel Sekunden. Da wir aber keinen Gebrauch machen werden von Tausendstel Sekunden, werden wir dies erst umrechnen nach volle Sekunden. Dazu teilen wir die Anzahl an Tausendstel Sekunden durch 1000 und runden das Resultat nach unten ab mit der Funktion floor()5 des Objeks Math6 (beachten Sie die richtige Schreibweise). Wenn Sie die Zahl nach oben abrunden wollen, verwenden Sie die Funktion ceil()7. Wenn Sie die Abrundung automatisieren möchten nach den normalen, mathematischen Regeln, verwenden Sie die Funktion round()8. Als nächstes berechnen9 wir wieviele Tage, Stunden, Minuten und Sekunden dann noch übrig bleiben.
Die Anzahl der verbleibenden Tage ist gleich die Anzahl der Sekunden (rest)
geteilt durch 86400 (Sekunden im Tag, 60 * 60 * 24), und nach unten abgerundet.
Die verbleibende Zahl an Sekunden errechnen wir mit einer Restteilung (mit dem
Prozentzeichen) von rest durch 86400. Danach machen wir für die Stunden,
Minuten und Sekunden dasselbe, jedoch Teilen wir dabei durch 3600 (Sekunden in
der Stunde, 60 * 60), bzw. durch 60 (Sekunden in der Minute). Die danach verbleibende
Zahl ist die Zahl der verbleibenden Sekunden. Beachten Sie auch, dass nach den
Berechnungen der Stunden, Minuten und Sekunden jeweils eine IF-Abfrage erfolgt.
Wenn die Zahl kleiner als 10 ist, dann hat sie nur eine Ziffer und deshalb wird
eine Null davor gesetzt (sieht einfach besser aus). Wenn Sie diese dann noch weiter
verarbeiten wollen (was wir hier nicht machen), beachten Sie dann, dass die Variable
ab dann nicht mehr vom Typ INTEGER (Ganzzahl) ist, sondern vom Typ STRING (Zeichenkette).
Und jetzt kommen wir zum Ende der Funktion, wo wir die Uhr (Textfeld o.ä.) mit dem Ergebnis füllen. Dabei unterscheiden sich JavaScript und ActionScript, und bei JavaScript auch die beiden Varianten.
Zuerst setzen wir die verbleibende Zeit schön zusammen in einer Zeile und speichern
diese in der Variable verbleibende_zeit. Beachten Sie hierbei den Gebrauch
von Anführungszeichen10.Abhängig davon welche Methode Sie verwenden, müssen Sie jetzt entscheiden. Wenn Sie mit JavaScript und einem Formular arbeiten, nehmen Sie der erste Codeteil (das Formular nennt sich "Anzeige" und das Textfeld "Uhr". Die korrekte Schreibweise ist wichtig für JavaScript, sodass das Textfeld richtig angesprochen werden kann und der Wert (Englisch: Value) geändert werden kann11. Wenn Sie aber ein HTML-Element verwenden, dann müssen Sie mit dem JavaScript-Objekt node den Inhalt ändern. JavaScript spricht den ersten Kindknoten an, also der Text, und ändern diesen. Beachten Sie, dass das Element also schon bei der Definierung einen Inhalt haben soll (in diesem Beispiel ist das also ein Leerzeichen, dargestellt durch den Code). Wenn Sie die ActionScript-Variante nehmen, dann sprechen Sie das dynamische Textfeld an und ändern das Text-Element. So, das war's. Unten stehen die Codes nochmal mit einige extra Erklärungen bezüglich des Einbaus. Code einbauen: JavaScript: Bei der JavaScript-Variante entscheiden Sie sich erst für ein Formular oder ein anderes beliebiges Element. Wenn Sie zweiteres nehmen, beachten Sie dann, dass es schon von Anfang an einen Inhalt haben soll (ein einzelner Buchstabe reicht schon). Sie müssen sich selbst entscheiden welche Variante Sie wählen. Meistens werden für so etwas Formularfelder verwendet, jedoch dehnen diese sich nicht von selbst aus, was andere HTML-Elemente schon tun. Letztere können auch besser mit CSS gelayouted werden (oder zumindest sind diese dann kompatibler zu den verschiedenen Browsern). Da diese nur in JavaScript-fähigen Browsern angezeigt werden sollen, werden diese mit der Funktion write()12 auf der Seite gezeigt. Für Leute ohne (aktiviertem) JavaScript kann mit dem <NOSCRIPT>-Tag ein alternativer Text angezeigt werden. Wie Sie sehen habe ich hier noch eine extra IF-Abfrage eingebaut, sodass ein alternativer Text angezeigt wird wenn das Datum schon vorbei ist. Auch muss das Script webkommentiert werden mit <-- und --!>, sodass in JavaScript-unfähige Browser das Script nicht als Text angezeigt wird. Der Code fängt an mit dem Öffnungstag für Scripts. Hierbei definieren Sie den Scripttyp als "text/javascript", und für ältere Browser noch das Language-Attribut. Des Weiteren wurde noch eine IF-Anweisung eingefügt für die verschiedenen Browsern, weil diese verschiedene DOM's (Document Objekt Modell) verwenden. Mit diesem werden HTML-Elemente angesprochen und manche ältere Browser verwenden ein nicht-Standard-konformes DOM, wodurch der Code nicht funktionieren würde.
ActionScript:Zur ActionScript-Variante gibt es recht wenig zu sagen. Bauen Sie unten stehenden Code ein, und style Sie die Uhr. Wenn Sie Ihre Seite nicht komplett in Flash gestalten, sondern nur die Uhr in HTML einbinden, können Sie auch einen alternativen Text anzeigen. Dieser steht dann zwischen den <OBJECT>-Tags. Um kompatibel zu älteren Browsern zu sein, müssen Sie allerdings den Code dreimal schreiben:
Weiters können Sie nur Ihre Uhr in Flash stylen (mit einem dynamischen Textfeld)
und unten stehenden Code übernehmen
(natürlich müssen Sie noch das Datum einstellen und eine Ankündigungszeile schreiben).
Referenzen:
|
![]() ![]() ![]()
Autoren:04516
Artikel:00815 Glossar:04116 News:13565 Userbeiträge:16552 Queueeinträge:06254 ![]()
Projektsteuerung statt Anwesenheitskontrolle
MONDroid - your monitoring Solution for Android with PRTG-Support Red-Hosting jetzt mit erweitertem Shop-Webhosting-Angebot [Mehr News] ![]()
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
|