ActionScript und JavaScript: Countdown auf der Seite - Artikel von www.it-academy.cc

- - ActionScript und JavaScript: Countdown auf der Seite

ActionScript und JavaScript: Countdown auf der Seite

Dieses Tutorial zeigt wie man eine Countdown-Uhr auf der Seite erstellt, und das sowohl in Flash ActionScript als in JavaScript.

Autor:	Patrick Faes (dreamer)
Datum:	01-11-2004, 13:20:19
Referenzen:	siehe Text
Schwierigkeit:	Fortgeschrittene
Ansichten:	42241x
Rating:	9 (1x bewertet)

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.


treffen = new Date(2005, 0, 14, 17, 40, 0, 0);

function countdown()
{

}

setInterval('countdown()',1000);
setInterval(countdown,1000);

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()¹ (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:

die Jahrzahl
der Monat (numerischer Index; Achtung: Januar hat die Indexzahl 0, und das läuft bis zu Dezember, mit der Indexzahl 11)
der Tag (mit Indexzahl von 1 bis 31)
die Stunde (im 24-Stundenformat, also von 0 bis 24, 24 ist dabei 0 Uhr des nächsten Tages)
die Minute (0 bis 59)
die Sekunde (0 bis 59)
die Tausendstel Sekunde (von 0 bis 999, sollten Sie aber nicht verwenden)

Danach wird die Funktion countdown() deklariert, er braucht keine weitere Parameter.

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:

JavaScript (grüner Code): der Funktionsname steht zwischen Anführungszeichen und die Argumente werden zwischen Klammern mitgegeben, als zweiten Parameter braucht setInterval (beachten Sie die Schriftgrößen) den Zeitabstand in Tausendstel Sekunden (die Funktion soll jede Sekunde wiederholt werden, das macht also 1000 Tausendstel Sekunden)
ActionScript (blauer Code): der Funktionsname steht nicht zwischen Anführungszeichen und hat keine Klammer, der Zeitabstand ist der zweite Parameter und die Argumente die an der Funktion übergeben werden sollen, werden als weitere Parameter an setInterval weitergegeben, jeweils ein Argument pro Parameter z.B. ,"Dies ist Argument 1",argument2,'Das dritte Argument'

Bevor wir uns die Funktion genauer ansehen, müssen wir erst mal etwas erstellen worin der Countdown angezeigt werden kann.

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 Formularfeld² oder ein anderes HTML-Element, wobei Sie dann mit dem JavaScript-Objekt node³ arbeiten müssen. Ich habe hier zwei Beispielcodes. Das erste ist ein Formularfeld, das andere ein SPAN-Element⁴.

<form name="anzeige">
<input type="text" size="16" name="Uhr">
</form>

<span id="Uhr"> </span>

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.

jetzt = new Date();
rest = treffen - jetzt;
rest = Math.floor(rest/1000);

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()⁵ des Objeks Math⁶ (beachten Sie die richtige Schreibweise). Wenn Sie die Zahl nach oben abrunden wollen, verwenden Sie die Funktion ceil()⁷. Wenn Sie die Abrundung automatisieren möchten nach den normalen, mathematischen Regeln, verwenden Sie die Funktion round()⁸.

Als nächstes berechnen⁹ wir wieviele Tage, Stunden, Minuten und Sekunden dann noch übrig bleiben.

tage = Math.floor(rest/86400);
rest %= 86400;

stunden = Math.floor(rest/3600);
if (stunden < 10) stunden = "0" + stunden;
rest %= 3600;

minuten = Math.floor(rest/60);
if (minuten < 10) minuten = "0" + minuten;
rest %= 60;

sekunden = rest;
if (sekunden < 10) sekunden = "0" + sekunden;

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.


verbleibende_zeit='Noch '+tage+' Tage und
'+stunden+':'+minuten+':'+sekunden+' bis zum Community-Treffen';

//mit einem Formular
document.Anzeige.Uhr.value = verbleibende_zeit;

//mit ein anderes HTML-Element, in diesem Beispiel ein SPAN
document.getElementById('Uhr').firstChild.data = verbleibende_zeit;

Uhr.text = verbleibende_zeit;

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ührungszeichen¹⁰.

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 kann¹¹.
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()¹² 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.

<script type="text/javascript" language="javascript">
<--
//ein Span-Element in HTML
document.write('<span style="" id="Uhr"> </span>');

//ein Formularfeld
document.write('<form name="Anzeige">
	<input type="text" size="16" style="" name="Uhr"></form>');

treffen = new Date(2005,3,25);

function countdown()
{
jetzt = new Date();
rest = treffen - jetzt;
rest = Math.floor(rest/1000);

tage = Math.floor(rest/86400);
rest %= 86400;

stunden = Math.floor(rest/3600);
if (stunden < 10) stunden = "0" + stunden;
rest %= 3600;

minuten = Math.floor(rest/60);
if (minuten < 10) minuten = "0" + minuten;
rest %= 60;

sekunden = rest;
if (sekunden < 10) sekunden = "0" + sekunden;

verbleibende_zeit = 'Noch ' + tage + ' Tage und
' + stunden + ':' + minuten + ':' + sekunden + ' bis zum Community-Treffen';

//Codeblock wenn man kein Formular, sondern ein anderes HTML-Element verwendet
if (document.getElementById) 
	{document.getElementById('Uhr').firstChild.data = verbleibende_zeit;}
else if (document.all) {document.all('Uhr').firstChild.data = verbleibende_zeit;}
else if (document.layers) {document.layers('Uhr').firstChild.data = verbleibende_zeit;}

//Code wenn ein Formular verwendet wird
Uhr.text = verbleibende_zeit;

}

setInterval('countdown()',1000);
--!>
</script>

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:


<object src="">     //Standard, unterstützt in neuen Browsern
Alternativer Text

//für ältere Versionen vom Internet Explorer
<param name="movie" value="">Alternativer Text</param>

//für ältere Versionen von Netscape Navigator
<embed src="">Alternativer Text</embed>

</object>

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).

treffen = new Date(2005,3,25);

function countdown()
{
jetzt = new Date();
rest = treffen - jetzt;
rest = Math.floor(rest/1000);

tage = Math.floor(rest/86400);
rest %= 86400;

stunden = Math.floor(rest/3600);
if (stunden < 10) stunden = "0" + stunden;
rest %= 3600;

minuten = Math.floor(rest/60);
if (minuten < 10) minuten = "0" + minuten;
rest %= 60;

sekunden = rest;
if (sekunden < 10) sekunden = "0" + sekunden;

verbleibende_zeit = 'Noch ' + tage + ' Tage und
' + stunden + ':' + minuten + ':' + sekunden + ' bis zum Community-Treffen';

Uhr.text = verbleibende_zeit;
}

setInterval(countdown,1000);

Referenzen:

Die Funktion Date() kann ein Datum ermitteln: mehr dazu
Formulare in HTML: mehr dazu
node in JavaScript spricht Unterelemente an: mehr dazu
span in HTML ist ein allgemeines Inline-Text-Element: mehr dazu
floor() rundet eine Kommazahl nach unten ab: mehr dazu
Math ist das Mathematikobjekt: mehr dazu
ceil() rundet eine Kommazahl nach oben ab: mehr dazu
round() rundet eine Kommazahl ab: mehr dazu
Berechnungen: mehr dazu
Der Gebrauch von Anführungszeichen: mehr dazu
Formularinhalte ändern in JavaScript: mehr dazu
Die JavaScript-Funktion write() schreibt Text in einem Document: mehr dazu

dreamer
Expert

Beitrag vom:
06-11-2004, 13:13:56

Anmerkung

In der ActionScript-Variante soll die Geschwindigkeit (Frames pro Sekunde) der Flash-Animation gleich die Geschwindigkeit der Uhr sein (z.B. wenn jeder Zehntel Sekunde gezählt werden soll, sollen es 100 FPS sein).

-----------------------------------------------------

[back to top]

User nicht eingeloggt

Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06243

Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?