de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Wie man einen einfachen Adventskalender in JavaScript erstellt

Der Advent ist die Zeit des Wartens und der Vorbereitung auf Weihnachten, die vier Sonntage vor Heiligabend beginnt. Die Adventszeit wird traditionell mit Hilfe eines Adventskalenders oder eines Adventskranzes gemessen. Obwohl der Beginn des Advents kein festes Datum ist, beginnen Adventskalender normalerweise am 1. Dezember.

Adventskalender können, je nach den örtlichen Gepflogenheiten, unterschiedliche Designs haben, aber meistens haben sie die Form von großen rechteckigen Karten mit 24 Fenstern oder Türen, die die Tage zwischen dem 1. und 24. Dezember markieren. Die Türen verbergen Botschaften, Gedichte, Gebete oder kleine Überraschungen.

In diesem Beitrag zeige ich Ihnen, wie Sie einen Adventskalender in objektorientiertem JavaScript erstellen können . Da es in JavaScript erstellt wird, können Sie den Code einfach in Ihre eigene Website einfügen.

  • Demo
  • Quelle herunterladen

JavaScript Kalenderdesign

Unser Adventskalender hat 24 Türen zu einem weihnachtlichen Hintergrundbild. Jede Tür verbirgt ein weihnachtliches Zitat, das in Form einer Warnmeldung erscheint, wenn der Benutzer auf die Tür klickt . Die Türen bleiben geschlossen, bis der Tag kommt, an dem der Adventskalender im richtigen Leben stattfindet. Die Türen können nicht vor dem richtigen Tag geöffnet werden.

Türen, die bereits aktiviert sind, haben eine andere Rand- und Hintergrundfarbe (weiß) als die deaktivierten (hellgrün). Wir werden HTML5, CSS3 und JavaScript verwenden, um unseren Adventskalender vorzubereiten, der ungefähr so ​​aussieht:

Schritt 1 - Erstellen Sie Dateistruktur und Ressourcen

Zuerst müssen wir ein schönes Hintergrundbild wählen. Ich wählte eine mit Hochformat von Pixabay, so dass mein Kalender 4 Spalten und 6 Zeilen enthält .

Es ist in Ordnung, wenn Sie eine Landschaftsausrichtung bevorzugen. Ändern Sie einfach die Positionen der Türen im JavaScript-Code, da Sie 6 Spalten und 4 Zeilen haben . Wenn Sie Ihr Bild haben, erstellen Sie einen Ordner namens / images, und speichern Sie es.

Dies wird unsere einzige Bildquelle für dieses Projekt sein.

Für die JavaScript-Dateien erstellen Sie einen / scripts- Ordner in Ihrem Stammordner. Fügen Sie zwei leere Textdateien ein und nennen Sie sie calendar.js und messages.js . Calendar.js enthält die Funktionalität, während messages.js das Nachrichtenfeld enthält, das angezeigt wird, wenn der Benutzer die Türen öffnet (klickt).

Wir benötigen auch eine HTML- und eine CSS-Datei. Erstellen Sie also zwei leere Dateien in Ihrem Stammordner und geben Sie ihnen die Namen index.html und style.css .

Wenn Sie bereit sind, haben Sie die Ressourcen und die Dateistruktur, die Sie zum Ausführen dieses Projekts benötigen, und Ihr Stammordner sieht ungefähr so ​​aus:

Schritt 2 - Erstellen Sie das HTML

Der HTML-Code, den wir verwenden, ist ziemlich einfach. Das CSS Stylesheet ist in der. Verlinkt Abschnitt, während die beiden JavaScript-Dateien im unteren Teil des Abschnitts enthalten sind. Letzteres ist notwendig, denn wenn wir die Skripte in die In diesem Abschnitt wird der Code nicht ausgeführt, da er die Elemente der geladenen HTML-Seite verwendet .

Der Adventskalender selbst ist im Inneren des

semantisches Tag Wir laden das Weihnachtsbild als ein HTML-Element und nicht als CSS-Hintergrundeigenschaft, da wir auf diese Weise einfach als Element des DOM darauf zugreifen können.

Unterhalb des Bildes platzieren wir eine leere ungeordnete Liste mit dem ID-Selektor "adventureDoors", der von den Skripten ausgefüllt wird. Wenn der Benutzer JavaScript in seinem Browser nicht aktiviert hat, wird nur ein einfaches Weihnachtsbild angezeigt.

 Adventskalender 

Adventskalender

(Funktion () {var Türen = []; für (var i = 0; i <24; i ++) {Türen [i] = neue Tür (myCal, i + 1); Türen [i] .content ();} Türen zurückgeben;}) ();
  • Demo
  • Quelle herunterladen

9 High-Tech-Spielzeug und Gadgets für Kinder entwickelt

9 High-Tech-Spielzeug und Gadgets für Kinder entwickelt

Viele Eltern sorgen sich, dass ihre Kinder zu viel Zeit online oder auf Smartphones und Tablets verbringen. Lernprogramme können jedoch zu einer der vielen grundlegenden Fähigkeiten werden, die Ihr Kind in seinem zukünftigen Leben benötigt.Anstatt Technologie aus ihrem Leben zu nehmen, gibt es intelligente Gadgets, die Kindern helfen können, Programmierkenntnisse zu entwickeln und ihnen gleichzeitig eine sichere Umgebung zum Entdecken, Spielen und Wachsen zu bieten.Wir

(Tech- und Design-Tipps)

35 Mal Ehrlichkeit hat den Tag nicht gerettet [PICS]

35 Mal Ehrlichkeit hat den Tag nicht gerettet [PICS]

Ehrlichkeit ist die beste Politik, wird uns immer wieder gesagt, als wir Kinder waren, von denselben Erwachsenen, die Karten bluffen, weiße Lügen erzählen, die Wahrheit verbiegen, mit Größen übertreiben, Missverständnisse, Mythen, Klatsch und Verleumdungen verbreiten. Jetzt, wo ich erwachsen bin (etwas), gebe ich die Idee an die nächste Generation weiter, dass manchmal, Kinder, Ehrlichkeit nicht die beste Politik zu sein scheint.Es gibt

(Tech- und Design-Tipps)