Kako zgraditi preprost adventni koledar v JavaScriptu
Advent je obdobje čakanja in priprave na božič, ki se začne štiri nedelje pred božičnim večerom. Pretekanje adventnega časa se tradicionalno meri s pomočjo bodisi adventnega koledarja ali adventnega venca. Čeprav začetek adventa ni določen datum, se adventni koledarji običajno začnejo 1. decembra.
Na podlagi lokalnih običajev imajo adventni koledarji različne oblike, najpogosteje pa imajo obliko velike pravokotne kartice z 24 okni ali vrati označevanje dni med 1. in 24. decembrom. Vrata skrivajo sporočila, pesmi, molitve ali malo presenečenj.
V tem postu vam bom pokazal, kako naredite adventni koledar v objektno usmerjenem JavaScriptu. Ker je izdelan v vanilijem JavaScriptu, lahko preprosto vstavite kodo v svojo spletno stran.
- Demo
- Prenesi vir
Oblikovanje koledarja JavaScript
Naš adventni koledar bo imel 24 vrat na božično tematsko sliko. Vsaka vrata bodo skrivala božično citat, ki bo se prikaže v obliki opozorilnega sporočila, ko uporabnik klikne na vrata. Vrata ostanejo zaprta, dokler ne pride dan, kot to velja za pravi adventni koledar; Vrata se ne morejo odpreti pred ustreznim dnevom.
Vrata, ki so že omogočena, imajo drugačno obrobo in barvo ozadja (belo) kot tista, ki so onemogočena (svetlobni). Uporabili bomo HTML5, CSS3 in JavaScript za pripravo našega adventnega koledarja, ki je podoben temu:
1. korak - Ustvarite datotečno strukturo in vire
Najprej moramo izbrati lepo ozadje. Izbrala sem eno s portretno orientacijo iz Pixabaya, tako da bo moj koledar vseboval 4 stolpci in 6 vrstic.
To je v redu, če imate raje krajinsko orientacijo. Samo spremenite položaje vrat v JavaScript kodo, kot boste imeli 6 stolpcev in 4 vrstice. Če imate sliko, ustvarite imenovano mapo / slike, in shranite.
To bo naš edini vir za ta projekt.
Za datoteke JavaScript ustvarite / skripte znotraj korenske mape. Vnesite dve prazni besedilni datoteki in ju poimenujte calendar.js in messages.js. Calendar.js bo imel funkcionalnost, medtem ko messages.js bo vseboval niz sporočil, ki se pojavijo, ko uporabnik “odpre” (klikne) vrata.
Potrebovali bomo tudi HTML in CSS datoteko, zato ustvarite dve prazni datoteki znotraj korenske mape in jim dodelite imena index.html in style.css.
Ko ste pripravljeni, imate na voljo sredstva in strukturo datotek, ki jih boste potrebovali za izvedbo tega projekta, in vaša korenska mapa izgleda takole:
2. korak - Ustvarite HTML
HTML koda, ki jo uporabljamo, je precej enostavna. Stilska lista CSS je povezana v
, medtem ko Na dnu zaslona sta vključeni dve datoteki JavaScript oddelek. Slednje je potrebno, ker, če bomo skripte postavili v Koda ne bi bila izvršena, kot je uporablja elemente naložene strani HTML.Adventni koledar sam je postavljen znotraj HTML element, in ne kot lastnost CSS ozadja, saj ga na ta način lahko enostavno dostopamo kot element DOM.
Pod sliko postavimo prazen neurejen seznam “adventDoors” izbirnik id, ki bo zapolnjen s skripti. Če uporabnik v svojem brskalniku ni omogočil JavaScripta, bo prikazal preprosto božično podobo.
Adventni koledar Adventni koledar
Korak 3 - Popunite “Sporočila” Array
Potrebujemo 24 božičnih citatov za naselitev “sporočila” matrika. Izbrala sem svoj od GoodReads.
Odprite scripts / messages.js mapa; tukaj bomo dali narekovaje, da jih ločimo od funkcionalnosti. The sporočila array je matrika znotraj matrike, vsak element zunanjega niza vsebuje drugo matriko z dvema elementoma: citatom in njegovim avtorjem.
Popolnite polje z vašimi priljubljenimi ponudbami v skladu z naslednjo skladnjo:
var messages = [["Citat 1", "Avtor 1"], ["Citat 2", "Avtor 2"],… ["Quote 24", "Author 24"]];
4. korak - Dodajte osnovne CSS sloge za vrata
Za ustvarjanje potrebnih CSS stilov za vrata si moramo zamisliti končno zasnovo, saj bodo sama vrata ustvarjena s JavaScriptom v naslednjih korakih..
Ustvariti moramo 4 stolpce in 6 vrstic pravokotnikov v pravilni poravnavi. Za to bomo uporabili pozicija: relativna in položaj: absolutno Pravila CSS. Ker se bo natančen položaj spremenil od vrat do vrat, bomo dodali na vrh, spodaj, levo, in prav lastnosti v JavaScriptu, v CSS-u moramo le dodati relativni položaj v vsebnik (neurejen seznam v HTML-ju) in absolutne položaje za elemente seznama (dodani bodo tudi v JS).
Druga pomembna stvar v datoteki s slogi je ustvarite drugačen dizajn za invalide in omogočene države. The .onemogočeno Izbirnik bo dodan onemogočenemu z JavaScriptom.
Za moj demo koledar nastavim trdno belo obrobo in bele pisave za omogočena vrata s prozornim belim ozadjem pri lebdenju; in osvetljeno zeleno obrobo ter pisave in transparentno ozadje za invalide. Če vam ta model ni všeč, lahko spremenite barve in sloge po vaši želji.
Naslednjo kodo (ali spremenjena pravila stila) vstavite v svoj style.css mapa.
ul # adventDoors position: relative; list-style: noben; oblazinjenje: 0; margin: 0; #adventDoors li position: absolute; #adventDoors li a barva: #fff; širina: 100%; višina: 100%; velikost pisave: 24px; text-align: center; zaslon: flex; upogibna smer: stolpec; justify-content: center; dekoracija besedila: nobena; meja: 1px #fff trdna; #adventDoors li a: not (.disabled): hover color: #fff; barva ozadja: prozorna; barva ozadja: rgba (255,255,255,0.15); #adventDoors li a.disabled border-color: # b6fe98; barva ozadja: rgba (196,254,171,0.15); barva: # b6fe98; kazalec: privzeto;
Korak 5 - Ustvarite globalne spremenljivke
Od tega koraka naprej bomo delali samo z scripts / calendar.js Datoteka, zdaj pa jo odprimo. Naš Adventni koledar bo uporabil dve globalni spremenljivki.
The myCal spremenljivka vsebuje sliko koledarja kot objekt JS. Slika je bila že dodana v index.html Datoteko v 2. koraku. Postavili bomo vrata na to sliko v 7. koraku. Ujemamo povezani HTML element označen z “adventCal” identifikatorja z uporabo metode getElementById () DOM. The myCal spremenljivka bo objekt DOM DOMOV HTMLImageElement.
The Trenutni datum spremenljivka vsebuje trenutni datum, tako da lahko naš skript preprosto določi, ali naj bodo vrata omogočena ali onemogočena. Ustvariti Trenutni datum ustvarjamo nov predmet razreda razreda JavaScript.
Naslednji odrezek kode postavite na vrh calendar.js mapa.
var myCal = document.getElementById ("adventCal"); var currentDate = nov datum (); Korak 6 - Ustvarite “Vrata” Razred
Ker potrebujemo 24 vrat, je najpomembnejši način za to, da ustvarimo “Vrata” razred in ga kasneje 24-krat ustvari.
Naš razred vrat ima dva parametra, koledar in dan. Za koledar parameter bomo morali prenesti božično podobo, ki bo delovala kot ozadje. Za dan parameter bomo morali prenesti trenutni dan v decembru v obliki celega števila.
Natančne vrednosti parametrov bomo prenesli v zadnjem koraku (korak 8), med namestitvijo objektov 24 vrat.
Za razred Door bomo naredili 5 lastnosti in 1 metodo. V tem koraku bomo šli samo skozi 5 lastnosti in razložil bom vsebina () v naslednjem koraku.
The “premer” & “višine” lastnosti
The premer in višine lastnosti dinamično izračunajo širino in višino posameznih vrat (ki se spreminjajo glede na širino in višino slike ozadja).
Multiplikatorji 0,1 in 0,95 so v enačbi, da pustijo nekaj prostora za robove, med vsakimi vrati in okoli strani koledarja..
The “adventMessage” nepremičnine
The adventMessage lastnost vsebuje vsebino opozorilnih sporočil, in sicer kotacije in ujemajoče se avtorje, ki jih je naš messages.js Datoteka ima. The adventMessage lastnost vzame citat in avtorja iz sporočil [] matrika, odvisno od trenutnega datuma.
Za 1. december adventMessage lastnost sprejme prvi element zunanjega polja, ki je sporočila [0], kot polja, ki temeljijo na ničli v JavaScriptu.
Iz istega razloga se postavi ponudba za 1. december kot sporočila [0] [0] (prvi element notranjega niza) in avtor ujemanja je dosegljiv kot sporočila [0] [1] (drugi element notranjega niza).
The “x”&”y” lastnosti
Lastnosti x in y držite pravilne položaje vseh vrat, ki jih bomo uporabili v naslednjem koraku za nastavitev na vrh in levo Lastnosti CSS. Ti bodo dopolnjevali pozicija: relativna in položaj: absolutno Pravila CSS, ki jih nastavimo v 4. koraku za kontejner vrat (ul # adventDoors), in vrata sama (#adventDoors li). Izračuni se morda zdijo nekoliko zastrašujoči, toda pojdimo hitro skozi njih.
The x bo uporabila lastnina levo Lastnost določanja položaja CSS v naslednjem koraku (korak 7). Določa, v pikslih, kjer mora biti posamezna vrata postavljena na os x.
Zajema širino slike ozadja in za to pušča malo prostora (4%). Nato s pomočjo preostalega operaterja oceni, v kateri stolpec bo postavljen (ne pozabite, da bo 4 stolpca), in na koncu doda malo (10%) maržo vsakemu posameznemu vratu z uporabo množilnika 1.1..
Na enak način, y bo uporabila lastnina na vrh Lastnost določanja položaja CSS in prav tako določa v slikovnih pikah, kjer mora biti posamezna vrata postavljena na os y.
Višino slike ozadja vzamemo s pomočjo lastnosti višine prenesenega koledar parameter (ki ima DOM-objekt) in pusti 4% marže okrog navpičnih strani koledarja.
Nato s pomočjo metode Math.floor () izračunamo, v kateri vrstici bo dan objekt Door (bo 6 vrstic).
Končno dodamo 10% marže za vsak predmet Door tako, da pomnožimo njegovo višino z uporabo množilnika 1.1.
funkcija Door (koledar, dan) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'Dan' + dan + 'adventa n' + '"' + sporočil [dan - 1] [0] + '" \ t - 1] [1] + '\ t this.x = (0,04 * koledar.širina + ((dan - 1)% 4) * (1.1 * this.width)); this.y = - (0,96 * calendar.height - Math.floor ((dan - 1) / 4) * (1.1 * to.višina)); this.content = function () …;
Korak 7 - Popunite “Vsebina ()” Metoda
Je vsebina () metoda, ki bo prikazala naša vrata v brskalniku. Najprej ustvarimo novo DOM-vozlišče s pomočjo spremenljivke vozlišče ki bo ustvaril
Ker bo razred Door v naslednjem koraku (korak 8) prisoten 24-krat v zanki, to pomeni, da bomo imeli 24
Lastnost node.id v naslednji vrstici doda izbirnik unikatnega identifikatorja vsakemu elementu seznama (vrat). To bomo potrebovali, da bomo lahko v naslednjem koraku pravilno prekrili dneve (korak 8). Na ta način bodo vrata 1 imela id =”vrata1 ", Vrata 2 bodo imela id =”door2 " izbirnik itd.
Lastnost node.style.cssText v naslednji vrstici doda nekatera pravila CSS za vsak element seznama (vrata) s pomočjo style =”… ” Atribut HTML, ki se uporablja za vključitev inline CSS v datoteke HTML. The node.style.cssText lastnost uporablja lastnosti razreda Door, ki smo ga nastavili v prejšnjem koraku (korak 6).
Da bi lahko kliknili naš Door objekt, moramo dodati tudi znotraj elementov seznama. To dosegamo s pomočjo innerNode spremenljivko, ki jo kot podrejeni element povezujemo z ustreznim elementom seznama, ki ga prepozna id =”vrata [i]” izbirnik (pri čemer je [i] dnevna številka), z uporabo metode appendChild () DOM, kot prej.
Lastnost innerHTML v naslednji vrstici prikazuje trenutni dan (1-24) na vrhu vrat v brskalniku in dodamo tudi href =”#” atribut naše sidrne oznake z lastnostjo href DOM.
Nazadnje v stavku if-else ocenimo, ali naj bo objekt Door omogočen ali onemogočen. Najprej preverimo, ali smo v 12. mesecu leta (december) z metodo getMonth () objekta Date. Dodati moramo 1, ker getMonth () temelji na ničli (januar je mesec 0 itd.).
Po tem preverjamo, ali je trenutni datum v Trenutni datum globalna spremenljivka, ki jo nastavimo v 5. koraku, je manjša od dan ki ga predstavlja trenutni predmet vrat.
Če ni december, ali dan, ki ga predstavlja dano vrata, je večji od trenutnega datuma, bi morala biti vrata onemogočena, v vseh drugih primerih pa mora biti omogočena, tako da lahko uporabniki kliknejo na to, in si ogledajo povezano sporočilo Advent.
Če so vrata onemogočena, dodamo a class =”onemogočeno” izbirnik na dano sidrno oznako s pomočjo lastnosti className. Ne pozabite, da smo že oblikovali .onemogočeno razred s CSS v 4. koraku. Prav tako moramo nastaviti atribut dogodka onclick HTML za vrnitev false.
Če je vrata v omogočenem stanju, dodamo adventMessage v opozorilnem sporočilu in ga postavite v atribut dogodka onclick HTML.
this.content = function () var node = document.createElement ("li"); document.getElementById ("adventDoors"). appendChild (vozlišče); node.id = "vrata" + dan; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; levo:" + this.x + "px ; "; var innerNode = document.createElement ("a"); document.getElementById ("vrata" + dan) .appendChild (internalNode); innerNode.innerHTML = dan; innerNode.href = "#"; če ((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; ; Korak 8 - Inicializirajte “Vrata” Predmeti
Nazadnje, razred Door moramo inicializirati 24-krat.
To naredimo tako, da uporabimo izraz Takojšnje priklicano funkcijo, ki je tukaj zelo uporaben, ker ne potrebujemo spremenljivke, ker želimo samo enkrat izvršiti kodo znotraj funkcije.
Ustvarjamo vrata [] matrika, ki bo vsebovala 24 vratna objekta. Preskusimo dneve od 1 do 24 (bodo 0-23-ti elementi vrat [], ker matrike temeljijo na ničli) in končno vrnejo celotno vrsto. vrata [] niza, vključno s predmeti 24 vrat, da jih prikažete v brskalniku.
(function () var doors = []; for (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Demo
- Prenesi vir
