Jak zbudować prosty kalendarz adwentowy w JavaScript
Adwent to okres oczekiwania i przygotowania do świąt Bożego Narodzenia, który rozpoczyna się w cztery niedziele przed Wigilią. Upływ czasu Adwentu jest tradycyjnie mierzony za pomocą kalendarza adwentowego lub wieńca adwentowego. Chociaż początek Adwentu nie jest ustaloną datą, Kalendarze Adwentowe zwykle zaczynają się 1 grudnia.
W oparciu o lokalne zwyczaje kalendarze adwentowe mogą mieć różne wzory, ale najczęściej przybierają formę duże prostokątne karty z 24 oknami lub drzwiami zaznaczając dni od 1 do 24 grudnia. Drzwi ukrywają wiadomości, wiersze, modlitwy lub małe niespodzianki.
W tym poście pokażę ci, jak to zrobić zrobić Kalendarz Adwentowy w JavaScript obiektowym. Ponieważ jest wykonany w waniliowym JavaScript, możesz łatwo umieścić kod na własnej stronie internetowej.
- Próbny
- Pobierz źródło
Projekt kalendarza JavaScript
Nasz kalendarz adwentowy będzie miał 24 drzwi na tle w tle. Każde drzwi ukryją cytat związany z Bożym Narodzeniem pojawia się w formie komunikatu ostrzegawczego, gdy użytkownik kliknie drzwi. Drzwi pozostają zamknięte, dopóki nie nadejdzie dany dzień, tak jak w przypadku prawdziwego kalendarza adwentowego; drzwi nie mogą zostać otwarte przed właściwym dniem.
Drzwi, które są już włączone, będą miały inny kolor obramowania i tła (biały) niż te wyłączone (jasnozielone). Użyjemy HTML5, CSS3 i JavaScript do przygotowania naszego Kalendarza Adwentowego, który wygląda mniej więcej tak:
Krok 1 - Utwórz strukturę plików i zasoby
Przede wszystkim musimy wybrać ładny obraz tła. Wybrałem jedną z orientacji pionowej z Pixabay, więc mój kalendarz będzie zawierał 4 kolumny i 6 rzędów.
Dobrze jest, jeśli preferujesz orientację poziomą. Po prostu zmień pozycje drzwi w kodzie JavaScript, jak będziesz miał 6 kolumn i 4 rzędy. Jeśli masz swój obraz, utwórz folder o nazwie /obrazy, i zapisz to.
Będzie to nasz jedyny zasób obrazkowy dla tego projektu.
Dla plików JavaScript utwórz / skrypty folder w folderze głównym. Umieść w nim dwa puste pliki tekstowe i nadaj im nazwy calendar.js i messages.js. Calendar.js zachowa funkcjonalność messages.js będzie zawierać tablicę wiadomości, które pojawiają się, gdy użytkownik “otwiera się” (klika) drzwi.
Będziemy również potrzebować pliku HTML i CSS, więc utwórz dwa puste pliki w folderze głównym i nadaj im nazwy index.html i style.css.
Gdy jesteś gotowy, masz zasoby i strukturę plików, których będziesz potrzebować do wykonania tego projektu, a folder główny wygląda mniej więcej tak:
Krok 2 - Utwórz kod HTML
Kod HTML, którego używamy, jest całkiem prosty. Arkusz stylów CSS jest połączony w
sekcja, podczas gdy dwa pliki JavaScript znajdują się na dole Sekcja. To ostatnie jest konieczne, ponieważ jeśli umieścimy skrypty w sekcja, kod nie zostanie wykonany, jak to używa elementów załadowanej strony HTML.Sam Kalendarz Adwentowy jest umieszczony wewnątrz Element HTML, a nie jako właściwość tła CSS, ponieważ w ten sposób możemy łatwo uzyskać do niego dostęp jako element DOM.
Pod obrazem umieszczamy pustą nieuporządkowaną listę za pomocą “adventDoors” selektor identyfikatora, który zostanie wypełniony przez skrypty. Jeśli użytkownik nie ma włączonej obsługi JavaScript w swojej przeglądarce, po prostu zobaczy prosty obraz świąteczny.
Kalendarz adwentowy Kalendarz adwentowy
Krok 3 - Wypełnij “Wiadomości” Szyk
Potrzebujemy 24 cytatów świątecznych, aby wypełnić “wiadomości” szyk. Wybrałem moją z GoodReads.
Otworzyć scripts / messages.js plik; umieścimy tutaj cytaty, aby zachować ich odrębność od funkcjonalności. The wiadomości array jest tablicą wewnątrz tablicy, każdy element tablicy zewnętrznej zawiera inną tablicę z dwoma elementami: cytatem i jego autorem.
Wypełnij tablicę swoimi ulubionymi cudzysłowami zgodnie z następującą składnią:
var messages = [[„Cytat 1”, „Autor 1”], [„Cytat 2”, „Autor 2”],… [„Cytat 24”, „Autor 24”]];
Krok 4 - Dodaj podstawowe style CSS dla drzwi
Aby stworzyć niezbędne style CSS dla drzwi, musimy wyobrazić sobie ostateczny projekt, ponieważ same drzwi zostaną utworzone za pomocą JavaScript w następujących krokach.
Musimy utworzyć 4 kolumny i 6 rzędów prostokątów w odpowiednim wyrównaniu. W tym celu użyjemy pozycja: względna i pozycja: absolutna Zasady CSS. Ponieważ dokładna pozycja zmieni drzwi po drzwiach, dodamy Top, Dolny, lewo, i dobrze właściwości w JavaScript, w CSS wystarczy dodać pozycję względną do kontenera (lista nieuporządkowana w HTML) i pozycje bezwzględne dla elementów listy (zostaną one również dodane w JS).
Inną ważną rzeczą w pliku arkusza stylów jest stworzyć inny projekt dla stanów wyłączonych i włączonych. The .wyłączone selektor zostanie dodany do wyłączonego przez JavaScript.
Dla mojego kalendarza demo ustawiam solidne białe obramowanie i białe czcionki dla włączonych drzwi z przezroczystym białym tłem podczas zawisu; oraz jasnozielone obramowanie i czcionki oraz przezroczyste, jasnozielone tło dla osób niepełnosprawnych. Jeśli nie podoba Ci się ten projekt, możesz zmienić kolory i style zgodnie z życzeniem.
Umieść następujący kod (lub zmodyfikowane reguły stylu) w swoim style.css plik.
ul # adventDoors position: relative; styl listy: brak; dopełnienie: 0; margines: 0; #adventDoors li position: absolute; #adventDoors li a color: #fff; szerokość: 100%; wysokość: 100%; rozmiar czcionki: 24px; wyrównywanie tekstu: środek; wyświetlacz: flex; flex-direction: column; justify-content: center; dekoracja tekstowa: brak; border: 1px #fff solid; #adventDoors li a: not (.disabled): hover color: #fff; kolor tła: przezroczysty; kolor tła: rgba (255,255,255,0,15); #adventDoors li a.disabled border-color: # b6fe98; kolor tła: rgba (196, 254, 171,01,15); kolor: # b6fe98; cursor: default;
Krok 5 - Utwórz zmienne globalne
Od tego kroku będziemy pracować tylko z scripts / calendar.js plik, więc otwórzmy to. Nasz Kalendarz Adwentowy użyje dwóch zmiennych globalnych.
The myCal zmienna przechowuje obraz kalendarza jako obiekt JS. Obraz został już dodany do index.html plik w kroku 2. Umieścimy drzwi na tym obrazie w kroku 7. Przechwytywamy powiązany HTML element oznaczony symbolem “adventCal” identyfikator za pomocą metody DOM getElementById (). The myCal zmienna będzie obiektem DOM HTMLImageElement.
The bieżąca data zmienna przechowuje bieżącą datę, dzięki czemu nasz skrypt może łatwo zdecydować, czy drzwi powinny być włączone, czy wyłączone. Aby utworzyć bieżąca data tworzymy nowy obiekt klasy Date JavaScript.
Umieść poniższy fragment kodu u góry swojego calendar.js plik.
var myCal = document.getElementById ("adventCal"); var currentDate = new Date (); Krok 6 - Utwórz “Drzwi” Klasa
Ponieważ potrzebujemy 24 drzwi, najprostszym sposobem na to jest utworzenie “Drzwi” klasa, a później instytut 24 razy.
Nasza klasa drzwi ma dwa parametry, kalendarz i dzień. Dla kalendarz parametr będziemy musieli przekazać obraz świąteczny, który będzie funkcjonował jako tło. Dla dzień parametr będziemy musieli przejść bieżący dzień grudnia w postaci liczby całkowitej.
Dokładne wartości parametrów przekażemy w ostatnim kroku (krok 8), podczas tworzenia 24 obiektów drzwi.
Zrobimy 5 właściwości i 1 metodę dla klasy Drzwi. W tym kroku przejdziemy tylko przez 5 właściwości i wyjaśnię to zawartość() metoda w następnym kroku.
The “szerokość” & “wysokość” nieruchomości
The szerokość i wysokość właściwości dynamicznie obliczają szerokość i wysokość poszczególnych drzwi (które zmieniają się w zależności od szerokości i wysokości obrazu tła).
Mnożniki 0,1 i 0,95 znajdują się w równaniu, aby zostawić trochę miejsca na marginesy, między drzwiami i wokół boków Kalendarza.
The “adventMessage” własność
The adventMessage właściwość przechowuje treść komunikatów alarmowych, a mianowicie cytaty i pasujących autorów, które nasz messages.js plik trzyma. The adventMessage właściwość przyjmuje cytat i autora z wiadomości [] tablica, w zależności od aktualnej daty.
Na 1 grudnia adventMessage właściwość przyjmuje pierwszy element tablicy zewnętrznej, która jest wiadomości [0], jako tablice są oparte na zero w JavaScript.
Z tego samego powodu cytat dla Dec 1 jest umieszczony jako wiadomości [0] [0] (pierwszy element tablicy wewnętrznej), a dopasowany autor może zostać osiągnięty jako wiadomości [0] [1] (drugi element tablicy wewnętrznej).
The “x”&”y” nieruchomości
Nieruchomości x i y przytrzymaj odpowiednie pozycje każdego drzwi, które wykorzystamy w następnym kroku, aby ustawić Top i lewo Właściwości CSS. Te uzupełnią pozycja: względna i pozycja: absolutna Reguły CSS, które ustawiliśmy w kroku 4 dla kontenera drzwi (ul # adventDoors) i samych drzwi (#adventDoors li). Obliczenia mogą wydawać się nieco onieśmielające, ale przejdźmy przez nie szybko.
The x nieruchomość będzie używana przez lewo Właściwość pozycjonowania CSS w następnym kroku (krok 7). Określa w pikselach, gdzie poszczególne drzwi muszą być umieszczone na osi x.
Przyjmuje szerokość obrazu tła i pozostawia niewielki margines (4%). Następnie z pomocą operatora resztkowego ocenia, w której kolumnie zostanie on umieszczony (pamiętaj, że będą 4 kolumny), a na koniec dodaje odrobinę (10%) marginesu do każdego pojedynczego Drzwi przy użyciu mnożnika 1,1.
W ten sam sposób y nieruchomość będzie używana przez Top Właściwość pozycjonowania CSS, a także określa w pikselach, gdzie poszczególne drzwi muszą być umieszczone na osi y.
Bierzemy wysokość obrazu tła za pomocą właściwości height przekazanego kalendarz parametr (który przechowuje obiekt DOM) i pozostawia margines 4% wokół pionowych boków kalendarza.
Następnie za pomocą metody Math.floor () obliczamy, w którym wierszu będzie dany obiekt Door (będzie 6 wierszy).
Na koniec dodajemy 10% margines dla każdego obiektu drzwi, mnożąc jego wysokość za pomocą mnożnika 1,1.
funkcja Drzwi (kalendarz, dzień) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'Day' + day + 'Adventu n' + '”' + wiadomości [day - 1] [0] + '” n n' + 'by' + wiadomości [dzień - 1] [1] + 'n'; this.x = (0,04 * calendar.width + ((day - 1)% 4) * (1,1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((dzień - 1) / 4) * (1.1 * this.height)); this.content = function () …;
Krok 7 - Wypełnij “Zawartość()” metoda
To jest zawartość() metoda, która wyświetli nasze drzwi w przeglądarce. Po pierwsze, tworzymy nowy węzeł DOM za pomocą zmiennej węzeł to stworzy
Ponieważ klasa Door zostanie utworzona 24 razy w pętli for w następnym kroku (krok 8), oznacza to, że będziemy mieli 24
Właściwość node.id w następnym wierszu dodaje unikalny selektor identyfikatora do każdego elementu listy (drzwi). Będziemy potrzebować tego, aby móc prawidłowo przeplatać dni w następnym kroku (krok 8). W ten sposób Drzwi 1 będą miały id =”drzwi1 ”, Drzwi 2 będą miały id =”door2 ” selektor itp.
Właściwość node.style.cssText w następnym wierszu dodaje kilka reguł CSS do każdego elementu listy (drzwi) za pomocą styl =”… ” Atrybut HTML używany do dołączania wbudowanego CSS w plikach HTML. The node.style.cssText właściwość używa właściwości klasy Drzwi, które ustawiliśmy w poprzednim kroku (krok 6).
Aby nasz obiekt Drzwi był klikalny, musimy również dodać obiekt znacznik wewnątrz elementów listy. Osiągamy to dzięki pomocy innerNode zmienna, którą łączymy jako element podrzędny z odpowiednim elementem listy identyfikowanym przez id =”drzwi [i]” selektor (z [i] będącym numerem dnia), używając metody DOM appendChild (), tak jak wcześniej.
Właściwość innerHTML w następnym wierszu wyświetla bieżący dzień (1-24) na górze drzwi w przeglądarce, a także dodajemy href =”#” przypisujemy do naszych znaczników zakotwiczenia za pomocą właściwości DOM href.
Wreszcie w instrukcji if-else oceniamy, czy obiekt Door powinien być włączony lub wyłączony. Najpierw sprawdzamy, czy jesteśmy w 12. miesiącu roku (grudzień) za pomocą metody getMonth () obiektu Date. Musimy dodać 1, ponieważ getMonth () ma wartość zero (styczeń to miesiąc 0 itd.).
Następnie sprawdzamy, czy aktualna data jest przechowywana w bieżąca data zmienna globalna ustawiona w kroku 5 jest mniejsza niż dzień że obecny obiekt Drzwi reprezentuje.
Jeśli nie jest grudzień, lub dzień reprezentowany przez dane Drzwi jest większy niż bieżąca data, Drzwi powinny być wyłączone, w innych przypadkach musi być włączone, aby użytkownicy mogli na nie kliknąć i zobaczyć powiązaną wiadomość adwentową.
Jeśli drzwi są wyłączone, dodajemy klasa =”wyłączone” selektor do podanego tagu anchor za pomocą właściwości className. Pamiętaj, że już stylizowaliśmy .wyłączone klasa z CSS w kroku 4. Musimy także ustawić atrybut zdarzenia HTML onclick, aby zwrócił false.
Jeśli drzwi są w stanie włączenia, dodajemy adventMessage właściwość do komunikatu alertu i umieść go w atrybucie zdarzenia HTML onclick.
this.content = function () var node = document.createElement ("li"); document.getElementById ("adventDoors"). appendChild (node); node.id = „drzwi” + dzień; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; left:" + this.x + "px ; ”; var innerNode = document.createElement ("a"); document.getElementById ("drzwi" + dzień) .appendChild (innerNode); innerNode.innerHTML = dzień; 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; ; Krok 8 - Zainicjuj “Drzwi” Obiekty
Wreszcie musimy zainicjować klasę drzwi 24 razy.
Aby to zrobić, używamy Wyrażenia Funkcji Natychmiastowego Wywołania, które jest tutaj całkiem przydatne, ponieważ nie potrzebujemy zmiennej, ponieważ chcemy tylko raz wykonać kod wewnątrz funkcji.
Tworzymy drzwi [] tablica, która pomieści 24 obiekty Drzwi. Przechodzimy przez dni od 1 do 24 (będą to 0-23 elementy tablicy drzwi [], ponieważ tablice są oparte na zerach) i ostatecznie zwracają całość drzwi [] tablica zawierająca 24 obiekty Drzwi, aby wyświetlić je w przeglądarce.
(function () var doors = []; for (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Próbny
- Pobierz źródło
