So erstellen Sie einen einfachen Adventskalender in JavaScript
Advent ist die Zeit des Wartens und Vorbereitens auf Weihnachten, die vier Sonntage vor dem Weihnachtsabend beginnt. Der Ablauf der Adventszeit wird traditionell mit Hilfe eines Adventskalenders oder eines Adventskranzes gemessen. Obwohl der Beginn des Advents kein fester Termin ist, beginnen Adventskalender normalerweise am 1. Dezember.
Basierend auf den lokalen Gepflogenheiten können Adventskalender unterschiedliche Designs haben, meistens haben sie jedoch die Form große rechteckige Karten mit 24 Fenstern oder Türen Markieren Sie die Tage zwischen dem 1. und 24. Dezember. Die Türen verbergen Botschaften, Gedichte, Gebete oder kleine Überraschungen.
In diesem Beitrag werde ich Ihnen zeigen, wie In objektorientiertem JavaScript einen Adventskalender erstellen. Da es in Vanilla JavaScript erstellt wurde, können Sie den Code problemlos in Ihre eigene Website einfügen.
- Demo
- Quelle herunterladen
JavaScript-Kalenderentwurf
Unser Adventskalender verfügt über 24 Türen zu einem weihnachtlichen Hintergrundbild. Jede Tür wird ein Weihnachtszitat verstecken, das dazu gehört Popup in Form einer Warnmeldung, wenn der Benutzer an die Tür klickt. Die Türen bleiben geschlossen, bis der gegebene Tag kommt, wie es beim Adventkalender der Fall ist. 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 wie folgt aussieht:
Schritt 1 - Dateistruktur und Ressourcen erstellen
Zunächst müssen wir ein schönes Hintergrundbild auswählen. Ich habe eine mit Hochformat von Pixabay ausgewählt, damit mein Kalender enthalten wird 4 Spalten und 6 Zeilen.
Es ist in Ordnung, wenn Sie eine Landschaftsorientierung bevorzugen. Ändern Sie einfach die Position der Türen im JavaScript-Code 6 Spalten und 4 Zeilen. Wenn Sie über ein Bild verfügen, erstellen Sie einen Ordner mit dem Namen / Bilder, und speichern Sie es.
Dies ist unsere einzige Bildquelle für dieses Projekt.
Für die JavaScript-Dateien erstellen Sie ein / Skripte Ordner in Ihrem Stammordner. Platzieren Sie zwei leere Textdateien und benennen Sie sie calendar.js und messages.js. Calendar.js hält die Funktionalität, während messages.js enthält das Array von Nachrichten, die beim Benutzer angezeigt werden “öffnet” (klickt an) die Türen.
Außerdem benötigen wir 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, verfügen Sie über die Ressourcen und die Dateistruktur, die Sie benötigen, um dieses Projekt durchzuführen, 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 im verlinkt
Abschnitt, während die Zwei JavaScript-Dateien befinden sich am unteren Rand des Sektion. Letzteres ist notwendig, denn wenn wir die Skripte in die Abschnitt, der Code würde nicht so ausgeführt werden verwendet die Elemente der geladenen HTML-Seite.Der Adventskalender selbst befindet sich im HTML-Element und nicht als CSS-Hintergrundeigenschaft, da auf diese Weise als Element des DOMs problemlos darauf zugegriffen werden kann.
Unter dem Bild platzieren wir eine leere ungeordnete Liste mit der “adventToors” ID-Selektor, der von den Skripten aufgefüllt wird. Wenn der Benutzer JavaScript nicht in seinem Browser aktiviert hat, wird nur ein einfaches Weihnachtsbild angezeigt.
Adventskalender Adventskalender
Schritt 3 - Füllen Sie das aus “Mitteilungen” Array
Wir brauchen 24 Weihnachtszitate, um die zu bevölkern “Mitteilungen” Array. Ich habe meine von GoodReads ausgewählt.
Öffne das scripts / messages.js Datei; Wir werden die Anführungszeichen hier platzieren, um sie von der Funktionalität zu trennen. Das Mitteilungen Array ist ein Array innerhalb eines Arrays. Jedes Element des äußeren Arrays enthält ein anderes Array mit zwei Elementen: einem Zitat und seinem Autor.
Füllen Sie das Array mit Ihren bevorzugten Anführungszeichen gemäß der folgenden Syntax:
var messages = [["Quote 1", "Author 1"], ["Quote 2", "Author 2"],… ["Quote 24", "Autor 24"]];
Schritt 4 - Fügen Sie grundlegende CSS-Stile für die Doors hinzu
Um die notwendigen CSS-Stile für die Türen zu erstellen, müssen wir uns das endgültige Design vorstellen, da die Türen selbst in den folgenden Schritten mit JavaScript erstellt werden.
Wir müssen 4 Spalten und 6 Reihen von Rechtecken in der richtigen Ausrichtung erstellen. Dazu verwenden wir die Position: relativ und das Position: absolut CSS-Regeln Da sich die genaue Position von Tür zu Tür ändert, fügen wir das hinzu oben, Unterseite, links, und Recht Eigenschaften im JavaScript, im CSS müssen wir lediglich eine relative Position zum Container hinzufügen (ungeordnete Liste im HTML-Code) und absolute Positionen für die Listenelemente (diese werden auch in der JS hinzugefügt).
Die andere wichtige Sache in der Stylesheet-Datei ist zu Erstellen Sie ein anderes Design für die deaktivierten und aktivierten Zustände. Das .deaktiviert Der Selektor wird von JavaScript zum Deaktivierten hinzugefügt.
Für meinen Demo-Kalender habe ich einen festen weißen Rand und weiße Schriftarten für die aktivierten Türen mit einem transparenten weißen Hintergrund beim Schweben gesetzt. und eine hellgrüne Umrandung und Schriftarten sowie einen transparenten hellgrünen Hintergrund für Behinderte. Wenn Sie dieses Design nicht mögen, können Sie die Farben und Stile nach Ihren Wünschen ändern.
Fügen Sie den folgenden Code (oder Ihre geänderten Stilregeln) in Ihren ein style.css Datei.
ul # adventDoors position: relativ; Listenstil: keine; Polsterung: 0; Marge: 0; #adventDoors li position: absolut; #adventDoors li a color: #fff; Breite: 100%; Höhe: 100%; Schriftgröße: 24px; Text ausrichten: Mitte; Anzeige: Flex; Flex-Richtung: Spalte; Inhalt rechtfertigen: Mitte; Textdekoration: keine; border: 1px #fff fest; #adventDoors li a: nicht (.disabled): hover color: #fff; Hintergrundfarbe: transparent; Hintergrundfarbe: rgba (255,255,255,0,15); #adventDoors li a.disabled border-color: # b6fe98; Hintergrundfarbe: rgba (196,254,171,0,15); Farbe: # b6fe98; Cursor: Standard;
Schritt 5 - Erstellen Sie die globalen Variablen
Ab diesem Schritt arbeiten wir nur noch mit Skripte / calendar.js Datei, also lassen Sie uns das jetzt öffnen. Unser Adventskalender verwendet zwei globale Variablen.
Das myCal Variable enthält das Kalenderbild als JS-Objekt. Das Bild wurde dem bereits hinzugefügt index.html Datei in Schritt 2. In Schritt 7 werden wir die Türen auf dieses Bild setzen. Wir erfassen den zugehörigen HTML-Code Element markiert mit “adventCal” Bezeichner mithilfe der DOM-Methode getElementById (). Das myCal Variable ist ein HTMLImageElement-DOM-Objekt.
Das aktuelles Datum Die Variable enthält das aktuelle Datum, sodass unser Skript leicht entscheiden kann, ob eine Tür aktiviert oder deaktiviert werden soll. Erschaffen aktuelles Datum Wir instanziieren ein neues Objekt der Date JavaScript-Klasse.
Fügen Sie das folgende Code-Snippet oben in Ihr ein calendar.js Datei.
var myCal = document.getElementById ("adventCal"); var currentDate = neues Datum (); Schritt 6 - Erstellen Sie die “Tür” Klasse
Da wir 24 Türen benötigen, ist dies der einfachste Weg, eine zu erstellen “Tür” Klasse und instanziiert es später 24 Mal.
Unsere Door-Klasse hat zwei Parameter, Kalender und Tag. Für die Kalender Parameter müssen wir das Weihnachtsbild übergeben, das als Hintergrund fungiert. Für die Tag Parameter müssen wir den aktuellen Tag im Dezember in Form einer Ganzzahl übergeben.
Die genauen Werte der Parameter werden im letzten Schritt (Schritt 8) während der Instantiierung der 24 Door-Objekte übergeben.
Wir werden 5 Eigenschaften und 1 Methode für die Door-Klasse erstellen. In diesem Schritt werden wir nur die 5 Eigenschaften durchgehen, und ich werde das erklären Inhalt() Methode im nächsten Schritt.
Das “Breite” & “Höhe” Eigenschaften
Das Breite und Höhe Eigenschaften berechnen dynamisch die Breite und Höhe jeder einzelnen Tür (die sich je nach Breite und Höhe des Hintergrundbilds ändert).
Die Multiplikatoren 0,1 und 0,95 stehen in der Gleichung, um Platz für die Ränder zwischen den Türen und um die Seiten des Kalenders zu lassen.
Das “adventMessage” Eigentum
Das adventMessage Eigenschaft enthält den Inhalt der Warnmeldungen, nämlich die Zitate und die dazugehörigen Autoren messages.js Datei hält. Das adventMessage Immobilien nimmt ein Zitat und einen Autor aus dem Mitteilungen[] Array, abhängig vom aktuellen Datum.
Für den 1. Dezember die adventMessage property nimmt das erste Element des äußeren Arrays, das ist Nachrichten [0], da Arrays in JavaScript nullbasiert sind.
Aus dem gleichen Grund wird das Angebot für den 1. Dezember wie angezeigt Nachrichten [0] [0] (erstes Element des inneren Arrays) und der übereinstimmende Autor kann als erreicht werden Nachrichten [0] [1] (zweites Element des inneren Arrays).
Das “x”&”y” Eigenschaften
Eigenschaften x und y Halten Sie die richtigen Positionen für jede Tür, die wir im nächsten Schritt verwenden werden, um die Tür einzustellen oben und links CSS-Eigenschaften Diese werden das ergänzen Position: relativ und Position: absolut CSS-Regeln, die wir in Schritt 4 für den Türcontainer (ul # adventDoors) und die Türen selbst (#adventDoors li) festgelegt haben. Die Berechnungen mögen etwas einschüchternd wirken, aber gehen wir sie schnell durch.
Das x Eigenschaft wird von der genutzt links CSS-Positionierungseigenschaft im nächsten Schritt (Schritt 7). Sie bestimmt in Pixel, wo eine einzelne Tür auf der x-Achse platziert werden muss.
Es nimmt die Breite des Hintergrundbilds und hinterlässt einen kleinen Rand (4%). Dann wird mit Hilfe des Restoperators festgestellt, in welcher Spalte sie platziert wird (denken Sie daran, dass es 4 Spalten gibt), und fügt schließlich jeder einzelnen Tür einen kleinen Rand (10%) hinzu, indem sie einen 1,1-Multiplikator verwendet.
Der gleiche Weg, der y Eigenschaft wird von der genutzt oben CSS-Positionierungseigenschaft und bestimmt ebenfalls in Pixeln, wo eine einzelne Tür auf der y-Achse platziert werden muss.
Wir nehmen die Höhe des Hintergrundbildes mit Hilfe der Height-Eigenschaft des übergebenen Kalender Parameter (der ein DOM-Objekt enthält), und lassen Sie einen Rand von 4% um die vertikalen Seiten des Kalenders.
Dann berechnen wir mit Hilfe der Math.floor () - Methode, in welcher Zeile ein gegebenes Door-Objekt sein wird (es werden 6 Zeilen vorhanden sein)..
Schließlich fügen wir für jedes Door-Objekt eine Marge von 10% hinzu, indem wir seine Höhe unter Verwendung eines 1,1-Multiplikators multiplizieren.
Funktion Tür (Kalender, Tag) this.width = ((calendar.width - 0,1 * calendar.width) / 4) * 0,95; this.height = ((calendar.height - 0,1 * calendar.height) / 6) * 0,95; this.adventMessage = 'Tag' + Advent + 'Advent' \ n \ n '+' "'+ Nachrichten [Tag - 1] [0] +'" \ n \ n \ t '+' von '+ Nachrichten [Tag - 1] [1] + '\ n \ n'; this.x = (0,04 * Kalender.Weite + ((Tag - 1)% 4) * (1,1 * Diese.Weite)); this.y = - (0,96 * calendar.height - Math.floor ((day - 1) / 4) * (1,1 * this.height)); this.content = function () …;
Schritt 7 - Füllen Sie die “Inhalt()” Methode
Es ist der Inhalt() Methode, die unsere Türen im Browser anzeigt. Zunächst erstellen wir mit Hilfe der Variablen einen neuen DOM-Knoten Knoten das wird das schaffen
Da die Door-Klasse im nächsten Schritt (Schritt 8) 24-mal in einer for-Schleife instanziiert wird, bedeutet dies, dass wir 24 haben werden
Die Eigenschaft node.id in der nächsten Zeile fügt jedem Listenelement (Tür) eine eindeutige ID-Auswahl hinzu. Wir werden dies benötigen, um im nächsten Schritt (Schritt 8) die Tage richtig durchlaufen zu können. Auf diese Weise hat Tür 1 eine id =”door1 ", Tür 2 wird eine haben id =”door2 " Wahlschalter usw.
Die node.style.cssText -Eigenschaft in der nächsten Zeile fügt jedem Listenelement (door) mithilfe des Befehls ein paar CSS-Regeln hinzu style =”… ” HTML-Attribut, das zum Einfügen von Inline-CSS in HTML-Dateien verwendet wird. Das node.style.cssText Eigenschaft verwendet die Eigenschaften der Door-Klasse, die wir im vorherigen Schritt festgelegt haben (Schritt 6).
Um unser Door-Objekt anklickbar zu machen, müssen wir auch eine hinzufügen Tag innerhalb der Listenelemente. Das erreichen wir mit Hilfe der innerNode Variable, die wir als untergeordnetes Element an das entsprechende Listenelement binden, das durch das Element identifiziert wird id =”Tür [i]” Selektor (wobei [i] die Tagesnummer ist), indem Sie wie zuvor die DOM-Methode appendChild () verwenden.
Die innerHTML-Eigenschaft in der nächsten Zeile zeigt den aktuellen Tag (1-24) über der Tür im Browser an, und wir fügen außerdem ein href =”#” Attribut zu unseren Ankertags mithilfe der Eigenschaft href DOM.
In der if-else-Anweisung wird schließlich geprüft, ob ein Door-Objekt aktiviert oder deaktiviert werden soll. Zuerst prüfen wir, ob wir uns im 12. Monat des Jahres (Dezember) befinden, indem wir die getMonth () -Methode des Date-Objekts verwenden. Wir müssen 1 hinzufügen, da getMonth () nullbasiert ist (Januar ist Monat 0 usw.)..
Danach prüfen wir, ob das aktuelle Datum im aktuelles Datum Die in Schritt 5 eingestellte globale Variable ist kleiner als die Tag dass das aktuelle Door-Objekt darstellt.
Wenn es nicht Dezember ist oder der durch die angegebene Tür dargestellte Tag größer ist als das aktuelle Datum, sollte die Tür deaktiviert werden. In allen anderen Fällen muss sie aktiviert werden, damit Benutzer darauf klicken können und die zugehörige Adventsnachricht sehen.
Wenn die Tür deaktiviert ist, fügen wir ein class =”deaktiviert” Selektor für das angegebene Ankertag mithilfe der className-Eigenschaft. Denken Sie daran, wir haben bereits die .deaktiviert Klasse mit CSS in Schritt 4. Außerdem müssen Sie das onclick-HTML-Ereignisattribut so einstellen, dass es false zurückgibt.
Wenn sich die Tür im aktivierten Zustand befindet, fügen wir die hinzu adventMessage Eigenschaft an eine Warnmeldung an, und platzieren Sie diese innerhalb des onclick-HTML-Ereignisattributs.
this.content = function () var node = document.createElement ("li"); document.getElementById ("adventDoors"). appendChild (node); node.id = "Tür" + Tag; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; oben:" + this.y + "px; links:" + this.x + "px ; "; var innerNode = document.createElement ("a"); document.getElementById ("door" + day) .appendChild (innerNode); innerNode.innerHTML = Tag; innerNode.href = "#"; if ((currentDate.getMonth () + 1) < 12 || currentDate.getDate() < day ) innerNode.className = "disabled"; innerNode.onclick = function() return false; else var adventMessage = this.adventMessage; innerNode.onclick = function() alert(adventMessage); return false; ; Schritt 8 - Initialisieren Sie die “Tür” Objekte
Schließlich müssen wir die Door-Klasse 24-mal initialisieren.
Zu diesem Zweck verwenden wir einen sofort einberufenen Funktionsausdruck, der hier sehr nützlich ist, da wir keine Variable benötigen, da wir den Code nur einmal in der Funktion ausführen möchten.
Wir schaffen ein Türen [] Array, das die 24 Door-Objekte enthalten wird. Wir durchlaufen die Tage von 1 bis 24 (sie werden die 0-23 -ten Elemente des Arrays door [] sein, da Arrays nullbasiert sind) und geben schließlich das Ganze zurück Türen [] Array einschließlich der 24 Door-Objekte, um sie im Browser anzuzeigen.
(Funktion () var doors = []; für (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Demo
- Quelle herunterladen
