Испод слике стављамо празну неуређену листу са “адвентДоорс” ид селектор који ће бити попуњен скриптама. Ако корисник нема омогућен ЈаваСцрипт у свом претраживачу, они ће само видјети једноставну божићну слику.

            
 
Адвент Цалендар
  
 
     

Корак 3 - Попуните “Поруке” Арраи

Требамо 24 божићна цитата да попунимо “поруке” арраи. Изабрао сам свој од ГоодРеадс-а.

Отвори сцриптс / мессагес.јс филе; ставићемо цитате овде да би били одвојени од функционалности. Тхе поруке арраи је низ унутар низа, сваки елемент вањског низа садржи други низ с два елемента: цитат и његов аутор.

Попуните низ својим омиљеним наводима према следећој синтакси:

 вар мессагес = [["Куоте 1", "Аутхор 1"], ["Куоте 2", "Аутхор 2"],… ["Куоте 24", "Аутхор 24"]];

Корак 4 - Додајте основне ЦСС стилове за врата

Да бисте креирали потребне ЦСС стилове за врата, потребно је да замислите коначни дизајн, јер ће врата сама бити креирана помоћу ЈаваСцрипта у следећим корацима..

Потребно је да направимо 4 колоне и 6 редова правоугаоника у правилном поравнању. За ово ћемо користити позиција: релативна анд тхе позиција: апсолутна ЦСС правила. Како се тачна позиција мења од врата до врата, додаћемо топ, дно, лево, и јел тако својства у ЈаваСцрипту, у ЦСС-у само требамо додати релативну позицију контејнеру (неуређена листа у ХТМЛ-у), и апсолутне позиције за елементе листе (они ће бити додани иу ЈС).

Друга важна ствар у датотеци стилова је да направите другачији дизајн за онемогућене и омогућене државе. Тхе .онемогућен селектор ће бити додан онемогућеном ЈаваСцрипту.

За свој демо календар постављам чврсти бијели руб и бијеле фонтове за омогућена врата с прозирном бијелом позадином при лебдењу; и светло зелену границу, и фонтове и транспарентну позадину за оне који имају инвалидитет. Ако вам се овај дизајн не свиђа, можете промијенити боје и стилове према вашој жељи.

Поставите следећи код (или измењена правила стила) у свој стиле.цсс филе.

 ул # адвентДоорс поситион: релативе; лист-стиле: нема; паддинг: 0; маргин: 0;  #адвентДоорс ли поситион: абсолуте;  #адвентДоорс ли а цолор: #ффф; ширина: 100%; висина: 100%; фонт-сизе: 24пк; тект-алигн: центар; дисплеј: флек; флек-дирецтион: колона; јустифи-цонтент: центар; тект-децоратион: ноне; бордер: 1пк #ффф солид;  #адвентДоорс ли а: нот (.дисаблед): ховер цолор: #ффф; бацкгроунд-цолор: транспарент; бацкгроунд-цолор: ргба (255,255,255,0.15);  #адвентДоорс ли а.дисаблед бордер-цолор: # б6фе98; бацкгроунд-цолор: ргба (196,254,171,0.15); цолор: # б6фе98; цурсор: дефаулт; 

Корак 5 - Креирајте глобалне варијабле

Од овог корака даље ћемо радити само са сцриптс / цалендар.јс Сада ћемо отворити ово. Наш Адвентни Календар ће користити двије глобалне варијабле.

Тхе миЦал варијабла држи слику календара као ЈС објект. Слика је већ додата у индек.хтмл Датотека у Кораку 2. Вратићемо врата на ову слику у 7. кораку елемент означен са “адвентЦал” идентификатор помоћу методе гетЕлементБиИд () ДОМ. Тхе миЦал варијабла ће бити ХТМЛИмагеЕлемент ДОМ објект.

Тхе Тренутни датум променљива садржи тренутни датум тако да наша скрипта може лако да одлучи да ли би врата требало да буду омогућена или онемогућена. Створити Тренутни датум ми стварамо нови објекат класе Дате ЈаваСцрипт.

Ставите следећи исјечак кода на врх цалендар.јс филе.

 вар миЦал = доцумент.гетЕлементБиИд ("адвентЦал"); вар цуррентДате = нови датум ();

Корак 6 - Креирајте “Врата” Класа

Како нам је потребно 24 врата, најједноставнији начин да то урадимо је да направимо а “Врата” класа, а касније је инстанцирајте 24 пута.

Наша класа врата има два параметра, календар и дан. За календар параметар ћемо морати да проследимо божићну слику која ће функционисати као позадина. За дан параметар ћемо морати да проследимо тренутни дан децембра у облику целог броја.

Тачне вредности параметара ћемо проследити у последњем кораку (корак 8), приликом представљања објеката 24 врата.

Направићемо 5 својстава и 1 метод за класу Доор. У овом кораку ћемо проћи само кроз 5 својстава и објаснит ћу садржај () у следећем кораку.

Тхе “видтх” & “хеигхт” својства

Тхе видтх и хеигхт својства динамички израчунавају ширину и висину сваког појединачног врата (који се мења према ширини и висини позадинске слике).

Мултипликатори 0.1 и 0.95 су у једнаџби да би оставили простор за маргине, између сваког врата, и око страна календара, такође.

Тхе “адвентМессаге” својство

Тхе адвентМессаге поседује садржај порука упозорења, односно цитате и ауторе који одговарају мессагес.јс филе холд. Тхе адвентМессаге власништво узима цитат и аутора из поруке [] у зависности од тренутног датума.

За Дец 1 тхе адвентМессаге својство узима први елемент вањског низа који је поруке [0], као матрице су засноване на нули у ЈаваСцрипту.

Из истог разлога, цитат за 1. децембар је позициониран као поруке [0] [0] (први елемент унутарњег низа), а одговарајући аутор може се постићи као поруке [0] [1] (други елемент унутрашњег низа).

Тхе “Икс”&”и” својства

Пропертиес Икс и и држите одговарајуће положаје сваког врата које ћемо користити у следећем кораку да подесите топ и лево ЦСС својства. Ово ће надопунити позиција: релативна и позиција: апсолутна ЦСС правила која смо поставили у кораку 4 за контејнер за врата (ул # адвентДоорс), и сами врата (#адвентДоорс ли). Прорачуни могу изгледати помало застрашујуће, али идемо брзо кроз њих.

Тхе Икс имовину ће користити лево ЦСС својство позиционирања у следећем кораку (корак 7). Она одређује у пикселима где појединачна врата морају бити постављена на оси к.

Заузима ширину позадинске слике и оставља мало маргине за њу (4%). Затим, уз помоћ остатка оператера, процењује у којој колони ће бити смештена (запамтите, биће 4 колоне), и на крају додаје малу (10%) маргину сваком појединачном Врту користећи 1,1 мултипликатор.

Исто тако и имовину ће користити топ ЦСС позиционирање својства, а исто тако одређује у пикселима гдје се појединачна врата требају поставити на и-оси.

Узмемо висину позадинске слике помоћу висинске особине пропуштеног календар параметар (који садржи ДОМ-објект) и оставља маргину од 4% око вертикалних страна календара.

Затим, уз помоћ методе Матх.флоор () израчунавамо у којем реду ће бити дат објекат Врата (биће 6 редова).

Коначно додајемо 10% маргине за сваки Доор објект множењем његове висине користећи 1,1 мултипликатор.

 функција Доор (календар, дан) тхис.видтх = ((цалендар.видтх - 0.1 * цалендар.видтх) / 4) * 0.95; тхис.хеигхт = ((цалендар.хеигхт - 0.1 * цалендар.хеигхт) / 6) * 0.95; тхис.адвентМессаге = 'Дан' + дан + 'Адвента н' + '"' + порука [дан - 1] [0] + '" \ т - 1] [1] + 'н'; тхис.к = (0.04 * цалендар.видтх + ((дан - 1)% 4) * (1.1 * тхис.видтх)); тхис.и = - (0.96 * цалендар.хеигхт - Матх.флоор ((дан - 1) / 4) * (1.1 * тхис.хеигхт)); тхис.цонтент = фунцтион () …; 

Корак 7 - Попуните “Садржај ()” Метход

То је садржај () метод који ће приказати наша врата у претраживачу. Прије свега, креирамо нови ДОМ чвор уз помоћ варијабле ноде који ће створити

 тхис.цонтент = фунцтион () вар ноде = доцумент.цреатеЕлемент ("ли"); доцумент.гетЕлементБиИд ("адвентДоорс"). аппендЦхилд (ноде); ноде.ид = "врата" + дан; ноде.стиле.цссТект = "видтх:" + тхис.видтх + "пк; хеигхт:" + тхис.хеигхт + "пк; топ:" + тхис.и + "пк; лефт:" + тхис.к + "пк ; "; вар иннерНоде = доцумент.цреатеЕлемент ("а"); доцумент.гетЕлементБиИд ("врата" + дан) .аппендЦхилд (иннерНоде); иннерНоде.иннерХТМЛ = дан; иннерНоде.хреф = "#"; ако ((цуррентДате.гетМонтх () + 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;   ;

 (фунцтион () вар доорс = []; фор (вар и = 0; и < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();