이미지 아래에 빈 정렬되지 않은 목록을 “출입구” 스크립트로 채울 ID 선택기입니다. 사용자가 브라우저에서 자바 스크립트를 사용하도록 설정하지 않은 경우 간단한 크리스마스 이미지 만 표시됩니다..

            
 
강림절 달력
  
 
     

3 단계 - “메시지” 정렬

우리는 24 개의 크리스마스 따옴표가 필요합니다. “메시지” 정렬. 나는 GoodReads에서 나의 것을 선택했다..

그 scripts / messages.js 파일; 우리는 따옴표를 기능과 분리하여 따로 보관할 것입니다. 그만큼 메시지 array는 배열 내부의 배열이고, outer 배열의 각 요소에는 두 개의 요소가있는 또 다른 배열이 들어 있습니다. 따옴표와 그 작성자.

다음 구문에 따라 원하는 따옴표로 배열을 채 웁니다.

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

4 단계 - 문에 기본 CSS 스타일 추가

문에 필요한 CSS 스타일을 만들려면 문안 자체가 다음 단계에서 JavaScript로 작성되므로 최종 디자인을 상상할 필요가 있습니다..

적절한 정렬을 위해 4 열과 6 행의 직사각형을 만들어야합니다. 이를 위해 우리는 직위 : 상대적 그리고 직위 : 절대 CSS 규칙. 정확한 위치가 문에 따라 바뀌므로 상단, 바닥, 왼쪽, 과 권리 자바 스크립트의 속성, CSS의 컨테이너 (HTML의 정렬되지 않은 목록) 및 목록 요소의 절대 위치 (JS에 추가됨)에 상대적인 위치를 추가하기 만하면됩니다..

스타일 시트 파일의 다른 중요한 점은 비활성화 된 상태와 활성화 된 상태에 대해 서로 다른 디자인을 만듭니다.. 그만큼 .장애인 선택기가 자바 스크립트에 의해 비활성화 됨에 추가됩니다..

내 데모 캘린더의 경우, 흰색 배경이 흰색으로 설정된 활성화 된 도어의 흰색 테두리와 흰색 글꼴을 설정했습니다. 그리고 밝은 녹색 테두리, 그리고 글꼴, 그리고 비활성화 된 것들에 대한 투명한 밝은 녹색 배경. 이 디자인이 마음에 들지 않으면 원하는대로 색상과 스타일을 바꿀 수 있습니다..

다음 코드 (또는 수정 된 스타일 규칙)를 style.css 파일.

 ul # adventDoors 위치 : 상대적; 목록 스타일 : 없음; 패딩 : 0; margin : 0;  #adventDoors li 위치 : 절대;  #adventDoors li a color : #fff; 너비 : 100 %; 높이 : 100 %; 글꼴 크기 : 24px; 텍스트 정렬 : 가운데; 디스플레이 : 플렉스; 플렉스 방향 : 칼럼; justify-content : 센터; 텍스트 장식 : 없음; 국경 : 1px #fff 고체;  #adventDoors li a : 아닙니다 (.disabled) : hover color : #fff; 배경색 : 투명; 배경색 : rgba (255,255,255,0.15);  #adventDoors li a.disabled 국경 - 색상 : # b6fe98; 배경색 : rgba (196,254,171,0.15); color : # b6fe98; 커서 : 디폴트; 

5 단계 - 전역 변수 만들기

이 단계에서 우리는 scripts / calendar.js 이제 파일을 열어 보겠습니다. Advent Calendar는 두 개의 전역 변수.

그만큼 마이 칼 변수는 달력 이미지를 JS 객체로 유지합니다. 이미지가 이미 추가되었습니다. index.html 파일을 만듭니다. 7 단계에서이 이미지 위에 문을 배치합니다. 관련 HTML을 캡처합니다. 요소로 표시된 “adventCal” getElementById () DOM 메소드를 사용하여 ID를 식별 할 수 있습니다. 그만큼 마이 칼 변수는 HTMLImageElement DOM 객체가 될 것입니다..

그만큼 currentDate 변수는 현재 날짜를 유지하므로 스크립트가 문을 활성화 또는 비활성화해야하는지 쉽게 결정할 수 있습니다. 만들다 currentDate Date JavaScript 클래스의 새 객체를 인스턴스화합니다..

다음 코드 스 니펫을 calendar.js 파일.

 var myCal = document.getElementById ( "adventCal"); var currentDate = new Date ();

6 단계 - “문” 수업

우리가 24 개의 문을 필요로하기 때문에 이것을하는 가장 간단한 방법은 “문” 클래스를 만들고 나중에 24 번 인스턴스화합니다..

우리의 Door 클래스에는 두 개의 매개 변수가 있습니다., 달력 과 일. 를 위해 달력 매개 변수는 배경으로 작동 할 크리스마스 이미지를 전달해야합니다. 를 위해 일 정수의 형태로 12 월의 현재 날짜를 전달해야하는 매개 변수.

24 개의 Door 객체를 인스턴스화하는 동안 마지막 단계 (8 단계)에서 매개 변수의 정확한 값을 전달합니다..

우리는 Door 클래스에 5 가지 속성과 1 가지 방법을 만들 것입니다. 이 단계에서는 5 가지 속성 만 살펴보고, 함유량() 다음 단계의 메소드.

그만큼 “폭” & “신장” 속성들

그만큼 폭 과 신장 속성은 각 개별 문의 너비와 높이를 동적으로 계산합니다 (배경 이미지의 너비와 높이에 따라 변경됨).

0.1 및 0.95 배율은 방정식에있어 각 여백 사이 및 여백 간격을두고 일정을 유지합니다..

그만큼 “adventMessage” 재산

그만큼 adventMessage 속성은 경고 메시지의 내용, 즉 따옴표와 일치하는 작성자를 보유합니다. messages.js 파일 보유. 그만큼 adventMessage 속성은 견적과 저자를 메시지 [] 배열, 현재 날짜에 따라 다름.

12 월 1 일 adventMessage property는 외부 배열의 첫 번째 요소를 취합니다. 메시지 [0], 배열은 JavaScript에서 0부터 시작합니다..

같은 이유로 12 월 1 일의 시세는 메시지 [0] [0] (내부 배열의 첫 번째 요소), 일치하는 작성자는 메시지 [0] [1] (내부 배열의 두 번째 요소).

그만큼 “엑스”&”와이” 속성들

등록 정보 엑스 과 와이 우리가 다음 단계에서 사용할 각 문의 적절한 위치를 잡고 상단 과 왼쪽 CSS 속성. 이것들은 직위 : 상대적 과 직위 : 절대 문 컨테이너 (ul # adventDoors) 및 문 자체 (#adventDoors li)에 대해 4 단계에서 설정 한 CSS 규칙 계산은 다소 위협적으로 보일 수 있지만 신속하게 진행해 보겠습니다..

그만큼 엑스 속성은 왼쪽 다음 단계 (7 단계)에서 CSS 위치 지정 속성. 개별 도어를 x 축에 배치해야하는 픽셀을 결정합니다..

그것은 배경 이미지의 너비를 취하고, 약간의 마진을 남긴다 (4 %). 나머지 연산자를 사용하여 어느 열에 배치 될지 (4 개의 열이 있음을 기억하십시오), 마지막으로 1.1 배수를 사용하여 각 개별 문에 약간 (10 %)의 여백을 추가합니다.

같은 방법으로 와이 속성은 상단 CSS 위치 지정 속성을 정의하고, 마찬가지로 개별 도어를 y 축에 배치해야하는 픽셀을 결정합니다.

전달 된 height 속성을 사용하여 배경 이미지 높이를 가져옵니다. 달력 매개 변수 (DOM 객체를 보유)를 사용하고 캘린더의 세로면 주위에 4 %의 여백을 남깁니다..

그런 다음 Math.floor () 메소드를 사용하여 주어진 Door 객체가 어떤 행에 있는지 계산합니다 (6 개의 행이 있음).

마지막으로 각 문 객체에 대해 1.1 배수를 사용하여 높이를 곱하여 10 %의 여백을 추가합니다..

 함수 문 (달력, 요일) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = Advent의 'Day'+ day + '+ 메시지 [day-1] [0] +' "\ n \ n \ t '+'by + messages [일 - 1] [1] + '\ n \ n'; this.x = (0.04 * calendar.width + ((day - 1) % 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((day-1) / 4) * (1.1 * this.height)); this.content = function () ...; 

7 단계 - “함유량()” 방법

그것은 함유량() 메소드를 호출하면 브라우저에 문이 열립니다. 우선, 우리는 변수의 도움으로 새로운 DOM 노드를 만든다. 마디 그것은

 this.content = function () var node = document.createElement ( "li"); document.getElementById ( "adventDoors"). appendChild (노드); node.id = "문"+ 일; node.style.cssText = "width :"+ this.width + "px; height :"+ this.height + "px; top :"+ this.y + "px; 왼쪽 :"+ this.x + "px ; "; var innerNode = document.createElement ( "a"); document.getElementById ( "door"+ day) .appendChild (innerNode); innerNode.innerHTML = 일; 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;   ;

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