Zem attēla mēs ievietojam tukšu, neierobežotu sarakstu ar “Adventdurvis” ID selektors, ko aizpildīs skripti. Ja lietotājam pārlūkprogrammā nav iespējota JavaScript, viņi vienkārši redzēs vienkāršu Ziemassvētku attēlu.

            
 
Adventa kalendārs
  
 
     

3. solis “Ziņas” Array

Mums ir nepieciešamas 24 Ziemassvētku pēdiņas “ziņojumus” masīvs. Es izvēlējos raktuvi no GoodReads.

Atveriet skripti / messages.js fails; mēs šeit ievietosim piedāvājumus, lai saglabātu tos no funkcionalitātes. The ziņojumus masīvs ir masīvs masīva iekšpusē, katrs ārējā masīva elements satur citu masīvu ar diviem elementiem: citātu un tā autoru.

Ievietojiet masīvu ar saviem iecienītākajiem piedāvājumiem saskaņā ar šādu sintaksi:

 var messages = [["Quote 1", "Author 1"], ["Quote 2", "Author 2"],… ["Quote 24", "Author 24"]];

4. solis - pievienojiet durvīm galvenos CSS stilus

Lai izveidotu nepieciešamo CSS stilu durvīm, mums ir jāatspoguļo galīgais dizains, jo pašas durvis tiks izveidotas ar JavaScript šādos soļos.

Mums ir jāizveido 4 slejas un 6 rindas taisnstūri pareizā virzienā. Šim nolūkam mēs to izmantosim pozīcija: relatīvais un pozīcija: absolūta CSS noteikumi. Tā kā precīza pozīcija mainīs durvis pa durvīm, mēs pievienosim tops, apakšā, pa kreisi, un pa labi īpašībām JavaScript, CSS mums tikai jāpievieno relatīva pozīcija konteineram (neierobežots saraksts HTML) un absolūtās pozīcijas saraksta elementiem (tie tiks pievienoti arī JS).

Otrs svarīgs stila lapas fails ir izveidot atšķirīgu dizainu invalīdiem un iespējotiem stāvokļiem. The .atspējota selektors tiks pievienots invalīdiem ar JavaScript.

Par manu demo kalendāru es iestatīju cietām baltām robežām un baltiem fontus iespējotām durvīm ar caurspīdīgu baltu fonu uz leju; un gaiši zaļa robeža un fonti, un caurspīdīgs gaišs zaļš fons invalīdiem. Ja jums nepatīk šis dizains, jūs varat mainīt krāsas un stilus atbilstoši jūsu vēlmēm.

Ievietojiet šādu kodu (vai modificēto stila noteikumus) savā style.css failu.

 ul # adventDoors pozīcija: relatīvais; saraksta stils: nav; polsterējums: 0; starpība: 0;  #adventDoors li amats: absolūts;  #adventDoors li a krāsa: #fff; platums: 100%; augstums: 100%; fonta lielums: 24px; teksta saskaņošana: centrs; displejs: flex; elastīgs virziens: kolonna; pamatot saturu: centrs; teksta apdare: nav; robeža: 1px #fff ciets;  #adventDoors li a: nav (.disabled): hover color: #fff; fona krāsa: caurspīdīga; fona krāsa: rgba (255,255,255,0,15);  #adventDoors li a.disabled border-color: # b6fe98; fona krāsa: rgba (196,254,171,0,15); krāsa: # b6fe98; kursors: noklusējums; 

5. solis - izveidojiet globālos mainīgos

No šī soļa mēs sadarbosimies tikai ar skripti / calendar.js failu, tāpēc atveriet to. Mūsu Adventa kalendārs izmantos divus globālus mainīgos.

The myCal mainīgais satur kalendāra attēlu kā JS objektu. Attēls jau ir pievienots index.html 7. solī. Uz 7 elements, kas apzīmēts ar “adventCal” identifikators, izmantojot getElementById () DOM metodi. The myCal mainīgais būs HTMLImageElement DOM objekts.

The Šodienas datums mainīgais satur pašreizējo datumu, lai mūsu skripts varētu viegli izlemt, vai durvis ir jāiespējo vai jāizslēdz. Radīt Šodienas datums mēs parādām jaunu datumu JavaScript klases objektu.

Ievietojiet šādu koda fragmentu jūsu augšpusē calendar.js failu.

 var myCal = document.getElementById ("adventCal"); var currentDate = jauns datums ();

6. solis - izveidojiet “Durvis” Klase

Tā kā mums ir vajadzīgas 24 durvis, visvienkāršākais veids, kā to izdarīt, ir izveidot a “Durvis” klasē un vēlāk to 24 reizes.

Mūsu durvju klasei ir divi parametri, kalendāru un dienā. Priekš kalendāru parametrs mums būs jāiztur Ziemassvētku attēls, kas darbosies kā fons. Priekš dienā parametram mums būs jānokārto pašreizējā decembra diena vesela skaitļa veidā.

Precīzās parametru vērtības tiks nodotas pēdējā solī (8. solis) 24 durvju objektu demonstrācijas laikā.

Mēs izgatavosim 5 īpašības un 1 metodi durvju klasei. Šajā solī mēs ejam cauri 5 īpašībām, un es izskaidrošu saturs () metode nākamajā solī.

The “platums” & “augstums” īpašības

The platums un augstums īpašības dinamiski aprēķina katra atsevišķa durvju platumu un augstumu (kas mainās atkarībā no fona attēla platuma un augstuma).

0,1 un 0,95 reizinātāji ir vienādojumā, lai atstātu vietu atstarpēm, starp katru durvīm un ap kalendāra malām..

The “adventMessage” īpašums

The adventMessage īpašums satur brīdinājuma ziņojumu saturu, proti, mūsu piedāvātās cenas un atbilstošos autorus messages.js failu tur. The adventMessage īpašums ņem citātu un autors no ziņas [] masīvs atkarībā no pašreizējā datuma.

Par 1. decembri adventMessage īpašums ņem ārējā masīva pirmo elementu, kas ir ziņas [0], Tā kā bloki ir nulles pamatā JavaScript.

Šī paša iemesla dēļ 1. decembra cenas tiek izvietotas kā ziņojumi [0] [0] (iekšējā elementa pirmais elements), un atbilstošo autoru var sasniegt kā ziņojumi [0] [1] (iekšējā elementa otrais elements).

The “x”&”y” īpašības

Rekvizīti x un y turiet katras durvis pareizās pozīcijas, ko mēs izmantosim nākamajā solī, lai iestatītu tops un pa kreisi CSS īpašības. Tie papildinās pozīcija: relatīvais un pozīcija: absolūta CSS noteikumi, kurus mēs noteicām 4. solī durvju konteineram (ul # adventDoors) un durvīm pašām (#adventDoors li). Aprēķini var šķist nedaudz biedējoši, bet ejam ātri.

The x īpašums tiks izmantots pa kreisi CSS pozicionēšanas īpašums nākamajā solī (7. solis). Tas nosaka pikseļos, kur uz x ass ir jānovieto atsevišķa durvis.

Tas aizņem fona attēla platumu, un tas atstāj to nedaudz (4%). Tad ar pārējā operatora palīdzību tā novērtē, kurā kolonnā tā tiks ievietota (atcerieties, ka būs 4 slejas), un visbeidzot, katram atsevišķam durvīm tiek pievienota neliela (10%) rezerve, izmantojot 1,1 reizinātāju.

Tādā pašā veidā y īpašums tiks izmantots tops CSS pozicionēšanas īpašums, kā arī nosaka pikseļos, kur uz Y ass ir jānovieto atsevišķa durvis..

Mēs ņemam fona attēla augstumu, izmantojot augstuma īpašību, kas nodota kalendāru parametrs (kas satur DOM objektu) un atstāj 4% normu ap kalendāra vertikālajām malām.

Tad, izmantojot Math.floor () metodi, mēs aprēķinām, kurā rindā tiks dots konkrētais durvju objekts (būs 6 rindas).

Visbeidzot, mēs pievienojam 10% rezervi katram durvju objektam, reizinot tā augstumu, izmantojot 1,1 reizinātāju.

 funkcija Durvis (kalendārs, diena) this.width = ((calendar.width - 0,1 * calendar.width) / 4) * 0,95; this.height = ((calendar.height - 0,1 * calendar.height) / 6) * 0,95; this.adventMessage = Adventes diena '+ diena +' n '+' "'+ ziņojumi [diena - 1] [0] +'" n "\ t - 1] [1] + 'n'; this.x = (0.04 * calendar.width + ((diena - 1)% 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((diena - 1) / 4) * (1.1 * šis.zems)); this.content = funkcija () …; 

7. solis “Saturs ()” Metode

Tas ir saturs () metode, kas pārlūkprogrammā parādīs mūsu durvis. Pirmkārt, ar mainīgā lieluma palīdzību mēs izveidojam jaunu DOM mezglu mezglu kas radīs

 this.content = funkcija () var node = document.createElement ("li"); document.getElementById ("advent Doors"). appendChild (mezgls); node.id = "durvis" + diena; node.style.cssText = "platums:" + šis platums + "px; augstums:" + šī.zems + "px; augšā:" + šī.y + "px; pa kreisi:" + this.x + "px ; "; var internalNode = document.createElement ("a"); document.getElementById ("durvis" + diena) .appendChild (internalNode); internalNode.innerHTML = diena; internalNode.href = "#"; ja ((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;   ;

 (funkcija () var doors = []; par (var i = 0; i < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();