Kaip sukurti paprastą Advento kalendorių „JavaScript“
Adventas - tai laukimo ir paruošimo Kalėdoms laikotarpis, kuris prasideda keturis sekmadienius prieš Kalėdas. Advento laikui praeinant tradiciškai matuojamas advento kalendorius arba Advento vainikas. Nors Advento pradžia nėra fiksuota data, Advento kalendoriai paprastai prasideda nuo gruodžio 1 d.
Remiantis vietiniais papročiais, Advento kalendoriai gali būti skirtingi, tačiau dažniausiai jie yra didelės stačiakampės kortelės su 24 langais ar durimis Dienos nuo gruodžio 1 iki 24 d.
Šiame pranešime jums parodysiu, kaip Padaryti Advento kalendorių į objektą orientuotą „JavaScript“. Kaip tai daroma vanilės „JavaScript“, galite lengvai įdėti kodą į savo svetainę.
- Demo
- Atsisiųsti šaltinį
„JavaScript“ kalendoriaus dizainas
Mūsų Advento kalendorius turės 24 duris ant Kalėdų temos fono paveikslėlio. Kiekviena durys bus paslėpta su Kalėdomis susijusi citata, kuri bus pasirodo įspėjimo pranešimo forma, kai vartotojas spusteli ant durų. Durys lieka uždarytos, kol ateis konkreti diena, kaip tai yra realiame gyvenime Advento kalendoriuje; durys negali būti atidarytos iki tinkamos dienos.
Jau įjungtos durys turi skirtingą sieną ir fono spalvą (balta) nei neįgalieji (šviesūs). Naudosime HTML5, CSS3 ir „JavaScript“, kad paruoštume mūsų Advento kalendorių, kuris atrodo taip:
1 veiksmas - sukurti failų struktūrą ir išteklius
Pirmiausia, turime pasirinkti gražų fono vaizdą. Pixabay pasirinko vieną su portretu, todėl mano kalendoriuje bus 4 stulpeliai ir 6 eilutės.
Tai gerai, jei norite kraštovaizdžio. Tiesiog pakeiskite „JavaScript“ kodo durų pozicijas, kaip turėsite 6 stulpeliai ir 4 eilutės. Jei turite savo vaizdą, sukurkite pavadinimą /vaizdai, ir išsaugokite.
Tai bus mūsų vienintelis šio projekto vaizdų šaltinis.
„JavaScript“ failams sukurkite a / scenarijai aplanko viduje. Įdėkite du tuščius tekstinius failus ir pavadinkite juos calendar.js ir messages.js. Calendar.js palaikys funkcionalumą messages.js bus pranešimų, kurie pasirodys naudotojui, masyvas “atsidaro” (paspaudžia) duris.
Mums taip pat reikės HTML ir CSS failo, todėl sukurkite du tuščius failus šakniniame aplanke ir suteikite jiems vardus index.html ir style.css.
Kai būsite pasiruošę, turite išteklių ir failų struktūrą, reikalingą šiam projektui atlikti, ir jūsų šakninis aplankas atrodo taip:
2 veiksmas - sukurkite HTML
Naudojamas HTML kodas yra gana paprastas. CSS stilių lentelė yra susieta
skyriuje, o du „JavaScript“ failai yra įtraukti į skyrius. Pastarasis yra būtinas, nes jei scenarijus įkeliame į skyriuje, kodas nebus vykdomas naudoja įkelto HTML puslapio elementus.Advento kalendorius patenka į HTML elementas, o ne kaip CSS fono savybė, nes tokiu būdu mes galime lengvai pasiekti jį kaip DOM elementą.
Po paveikslėliu į tuščią eilę įtraukiame tuščią nekoduotą sąrašą “adventų durys” ID selektorius, kurį užpildys scenarijai. Jei naudotojui naršyklėje nėra įgalinta „JavaScript“, jie tiesiog matys paprastą Kalėdų įvaizdį.
Advento kalendorius Advento kalendorius
3 žingsnis “Žinutės” Array
Mums reikia 24 Kalėdų kabučių, kad apgyvendintume “pranešimus” masyvas. Aš pasirinkau iš „GoodReads“.
Atidaryk scripts / messages.js failą; čia pateikiame kabutes, kad jas atskirtume nuo funkcionalumo. The pranešimus masyvas yra masyvas masyvo viduje, kiekvienas išorinio masyvo elementas turi kitą masyvą su dviem elementais: citata ir jo autoriu.
Paleiskite masyvą naudodami savo mėgstamas kabutes pagal šią sintaksę:
var messages = [["Citata 1", "Autorius 1"], ["Citata 2", "Autorius 2"], ... ["Cituoti 24", "Autorius 24"]];
4 žingsnis. Pridėti pagrindinius CSS stilius durims
Norint sukurti reikiamus CSS stilius durims, turime įsivaizduoti galutinį dizainą, nes patys durys bus sukurtos su „JavaScript“ šiais veiksmais.
Mes turime sukurti 4 stulpelius ir 6 eilutes stačiakampių tinkamu derinimu. Tam naudosime pozicija: santykinis ir pozicija: absoliutus CSS taisyklės. Kadangi tiksli vieta pakeis duris durimis, pridėsime viršuje, apačioje, kairėje, ir teisė „JavaScript“ ypatybės, CSS reikia tiesiog pridėti santykinę poziciją su konteineriu (nerodomas sąrašas HTML) ir absoliučias pozicijų sąrašo elementams (jos bus įtrauktos ir į JS).
Kitas svarbus stiliaus failo failas yra sukurti skirtingą dizainą neįgaliesiems ir įjungtoms būsenoms. The .išjungta „Selector“ bus pridėtas prie neįgaliųjų „JavaScript“.
Mano demonstraciniam kalendoriui nustatiau tvirtą baltą sieną ir baltus šriftus įjungtoms durims su skaidriais baltais fonais ant nugaros; ir šviesiai žalias rėmelis bei šriftai ir skaidrus šviesiai žalias fonas neįgaliesiems. Jei jums nepatinka šis dizainas, galite keisti spalvas ir stilius pagal pageidavimą.
Įdėkite šį kodą (arba modifikuotas stiliaus taisykles) į savo style.css failą.
ul # adventDoors pozicija: santykinis; sąrašo stilius: nėra; įdėklas: 0; marža: 0; #adventDoors li pozicija: absoliutus; #adventDoors li a color: #fff; plotis: 100%; aukštis: 100%; šrifto dydis: 24px; teksto derinimas: centras; ekranas: flex; lankstumas: stulpelis; pateisinti turinį: centras; teksto apdaila: nėra; siena: 1px #fff solid; #adventDoors li a: ne (.disabled): hover color: #fff; fono spalva: skaidri; fono spalva: rgba (255,255,255,0,15); #adventDoors li a.disabled border-color: # b6fe98; fono spalva: rgba (196,254,171,0.15); spalva: # b6fe98; žymeklis: numatytasis;
5 žingsnis - sukurkite pasaulinius kintamuosius
Nuo šio žingsnio mes dirbame tik su scripts / calendar.js failą, todėl dabar atidarykime. Mūsų Advento kalendoriuje bus naudojami du pasauliniai kintamieji.
The myCal kintamasis turi kalendoriaus vaizdą kaip JS objektą. Vaizdas jau buvo pridėtas prie index.html 7 žingsnį. Į 7 paveikslą įdėsime duris. Užfiksuosime susijusį HTML elementas pažymėtas “adventCal” identifikatorius naudojant getElementById () DOM metodą. The myCal kintamasis bus HTMLImageElement DOM objektas.
The dabartinė data kintamasis turi dabartinę datą, kad mūsų scenarijus galėtų lengvai nuspręsti, ar durys turėtų būti įjungtos ar išjungtos. Sukurti dabartinė data mes pristatome naują „Date JavaScript“ klasės objektą.
Įdėkite šį kodo fragmentą į savo viršų calendar.js failą.
var myCal = document.getElementById ("adventCal"); var currentDate = nauja data (); 6 veiksmas - sukurkite “Durys” Klasė
Kadangi mums reikia 24 durų, paprasčiausias būdas tai padaryti yra sukurti a “Durys” klasė, o vėliau ją 24 kartus.
Mūsų durų klasė turi du parametrus, kalendorius ir dieną. Už kalendorius parametras, kurį reikės perduoti Kalėdų atvaizdui, kuris veiks kaip fonas. Už dieną parametras, kurį turėsime perduoti dabartinei gruodžio mėnesiui sveikojo skaičiaus forma.
Tikslus parametrų reikšmes praėjusiame etape (8 žingsnis) perduosime 24 durų objektų demonstravimo metu.
Durų klasei bus 5 savybės ir 1 metodas. Šiame etape mes pereisime tik per 5 ypatybes ir paaiškinsiu turinys() metodas kitame etape.
The “plotis” & “aukštis” savybės
The plotis ir aukštis ypatybės dinamiškai apskaičiuoja kiekvieno atskiro durų plotį ir aukštį (tai keičiasi pagal fono vaizdo plotį ir aukštį).
0,1 ir 0,95 daugikliai yra lygtyje, kad paliktų šiek tiek vietos marginoms, tarp kiekvienos durys ir aplink kalendoriaus puses..
The “adventMessage” nuosavybė
The adventMessage nuosavybė turi įspėjimo pranešimų turinį, ty mūsų citatos ir atitinkamus autorius messages.js failas laikomas. The adventMessage nuosavybė užima citatą ir autorius iš pranešimai [] masyvas, priklausomai nuo dabartinės datos.
Dėl gruodžio 1 d adventMessage nuosavybė užima pirmąjį išorinio masyvo elementą pranešimai [0], Kadangi matricos „JavaScript“ yra nulinės.
Dėl tos pačios priežasties, gruodžio 1 d pranešimai [0] [0] (pirmasis vidinio masyvo elementas), o atitikimo autorius gali būti pasiektas kaip pranešimai [0] [1] (antrasis vidinio matricos elementas).
The “x”&”y” savybės
Savybės x ir y laikykite tinkamą durų padėtį, kurią naudosime kitame žingsnyje, norėdami nustatyti viršuje ir kairėje CSS savybės. Tai papildys pozicija: santykinis ir pozicija: absoliutus CSS taisyklės, kurias mes nustatėme 4 žingsnyje durų konteineriui (ul # adventDoors), ir patys durys (#adventDoors li). Skaičiavimai gali atrodyti šiek tiek bauginantys, bet eikime greitai per juos.
The x nuosavybė bus naudojama kairėje CSS padėties nustatymas kitame etape (7 žingsnis). Ji nustato pikseliais, kur atskirai „Door“ turi būti dedama ant x ašies.
Tai užima fono atvaizdo plotį ir palieka tam tikrą ribą (4%). Tuomet su likusiu operatoriumi jis įvertina, kurioje stulpelyje jis bus patalpintas (prisiminkite, kad bus 4 stulpeliai), ir galiausiai kiekvienam durims pridedama šiek tiek (10%) marža, naudojant 1,1 daugiklį.
Taip pat y nuosavybė bus naudojama viršuje CSS padėties nustatymo savybė ir taip pat nustato taškuose, kur atskirai „Door“ turi būti dedama į y ašį.
Fono paveikslėlio aukštį mes priimame perduodamo aukščio savybės pagalba kalendorius parametras (turintis DOM objektą) ir palikite 4% maržą aplink vertikalias kalendoriaus puses.
Tada, naudojant Math.floor () metodą, apskaičiuojame, kurioje eilutėje bus nurodytas durų objektas (bus 6 eilutės).
Galiausiai kiekvienam durų objektui pridedame 10% maržą, dauginant jo aukštį naudojant 1,1 daugiklį.
funkcija Durys (kalendorius, 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 = „Advento“ diena '+ diena +' n '+' "'+ pranešimai [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 - matematika. grindys ((diena - 1) / 4) * (1,1 * šis aukštis)); this.content = funkcija () …;
7 žingsnis “Turinys()” Metodas
Tai yra turinys() metodas, rodantis mūsų duris naršyklėje. Pirmiausia, kintamojo pagalba sukuriame naują DOM mazgą mazgas tai sukurs
Kadangi durų klasė bus perkelta 24 kartus į kitą etapą (8 žingsnis), tai reiškia, kad turėsime 24
Node.id ypatybė kitoje eilutėje kiekvienam sąrašo elementui (durims) prideda unikalų ID selektorių. Tam reikės, kad galėtume tinkamai perjungti kitas dienas (8 žingsnis). Tokiu būdu 1 duris turės id =”duris1 ", Durys 2 turės id =”duris2 " selektorius ir kt.
Node.style.cssText nuosavybė kitoje eilutėje kiekvienam sąrašo elementui (durims) prideda kai kurias CSS taisykles stilius =”… ” HTML atributas, naudojamas HTML failams įtraukti inline CSS. The node.style.cssText nuosavybė naudoja durų klasės savybes, kurias nustatėme ankstesniame etape (6 veiksmas).
Kad galėtume spustelėti mūsų durų objektą, taip pat turime pridėti žymos elementų sąraše. Tai pasiekiame padedant vidinis kodas kintamasis, kurį mes susiejame kaip vaiko elementą į atitinkamą sąrašo elementą, kurį nustatė id =”durys [i]” selektorius (kai [i] yra dienos numeris), naudojant appendChild () DOM metodą, kaip ir anksčiau.
VidinėjeHTML ypatybėje kitoje eilutėje rodoma dabartinė diena (1-24) naršyklės durų viršuje, o mes taip pat pridedame href =”#” priskirti mūsų inkarų žymes href DOM turtui.
Galiausiai „if-other“ pareiškime įvertinsime, ar durų objektas turėtų būti įjungtas arba išjungtas. Pirma, išnagrinėjame, ar mes esame 12-ojo mėnesio (gruodžio mėn.), Naudodami getMonth () metodą, esantį datos objektui. Turime pridėti 1, nes getMonth () yra nulinis (sausio mėn. - 0 mėn. Ir tt).
Po to mes patikrinsime, ar dabartinė data yra dabartinė data 5 veiksme nustatytas pasaulinis kintamasis yra mažesnis nei dieną kad yra dabartinis durų objektas.
Jei tai nėra gruodžio mėn., Arba diena, kurią nurodo Door, yra didesnė už dabartinę datą, durys turėtų būti išjungtos, bet kokiais kitais atvejais jis turi būti įjungtas, kad vartotojai galėtų jį spustelėti ir pamatyti susijusį Advento pranešimą.
Jei durys yra išjungtos, pridedame a klasė =”išjungta” pasirinktojo ankerinio žymeklio žymeklį, naudodami klasės pavadinimą. Atminkite, kad jau sukūrėme .išjungta klasė su CSS 4 žingsnyje. Taip pat turime nustatyti „onclick“ HTML įvykio atributą, kad grįžtumėte į klaidingą.
Jei durys yra įjungtos, pridedame adventMessage į įspėjimo pranešimą ir įdėkite jį į „onclick“ HTML įvykio atributą.
this.content = funkcija () var node = document.createElement ("li"); document.getElementById ("advent Doors"). appendChild (mazgas); node.id = "durys" + diena; node.style.cssText = "plotis:" + šis. plotis + "px; aukštis:" + šis. aukštis + "px; viršuje:" + tai.y + "px; kairėje:" + this.x + "px ; "; var internalNode = document.createElement ("a"); document.getElementById ("durys" + diena) .appendChild (internalNode); internalNode.innerHTML = diena; internalNode.href = "#"; jei ((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; ; 8 žingsnis - inicijuoti “Durys” Objektai
Galiausiai, mes turime inicijuoti durų klasę 24 kartus.
Norėdami tai padaryti, mes naudosime nedelsiant įkvėptą funkcijų išraišką, kuri čia yra gana naudinga, nes mums nereikia kintamojo, nes tik norime, kad kodą atliktume tik vieną kartą.
Mes sukuriame a durys [] masyvas, kuriame bus 24 durų objektai. Per kelias dienas mes einame nuo 1 iki 24 (jie bus 0-23-osios durų [] masyvo elementai, nes matricos yra nulinės) ir pagaliau grąžins visą durys [] masyvas, įskaitant 24 durų objektus, kad jie būtų rodomi naršyklėje.
(funkcija () var doors = []; už (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Demo
- Atsisiųsti šaltinį
