画像の下に、空の番号なしリストを配置します。 “adventDoors” スクリプトによって移入されるIDセレクタ。ユーザーのブラウザでJavaScriptが有効になっていない場合は、単純なクリスマス画像が表示されます。.

            
 
アドベントカレンダー
  
 
     

ステップ3 - “メッセージ” アレイ

私たちは、移入するために24のクリスマスの引用符が必要です。 “メッセージ” アレイ。私はGoodReadsから私のものを選びました.

開く scripts / messages.js ファイル;機能と区別するために、ここで引用符を配置します。の メッセージ arrayは配列の内側の配列です。外側の配列の各要素には2つの要素を持つ別の配列が含まれています：quoteとその作成者.

次の構文に従って、配列にお気に入りの引用符を入力します。

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

ステップ4 - ドアのための基本的なCSSスタイルを追加する

ドアに必要なCSSスタイルを作成するには、ドア自体が次の手順でJavaScriptで作成されるので、最終的なデザインを想像する必要があります。.

適切な配置で4列6行の長方形を作成する必要があります。これには、 位置：相対 そしてその 位置：絶対 CSSの規則正確な位置はドアごとに変わりますので、 上, 底, 左, そして 右 JavaScriptのプロパティ、CSSでは、コンテナへの相対位置（HTMLの番号なしリスト）、およびリスト要素の絶対位置（JSでも追加されます）を追加するだけです。.

スタイルシートファイルの他の重要なことは、 無効状態と有効状態に異なるデザインを作成する. の .無効 セレクタがJavaScriptによって無効に追加されます.

私のデモカレンダーのために私はホバリングの透明な白い背景で有効なドアのために純白のボーダーと白いフォントを設定しました。薄緑色の枠線、フォント、および無効なものの透明な薄緑色の背景。このデザインが気に入らない場合は、希望に応じて色やスタイルを変更できます。.

次のコード（または変更したスタイルルール）を style.css ファイル.

 ul＃adventDoors 位置：相対;リストスタイル：なし。パディング：０。マージン：0。 #adventDoors li position：absolute; #adventDoors li a color：#fff;幅：100％。身長：100％。フォントサイズ：24px。 text-align：center。ディスプレイ：フレックス。フレックス方向：列。内容を正当化する：中央。テキスト装飾：なし。ボーダー：1px #fff solid; #adventDoors li a：not（無効）：hover color：#fff;背景色：透明。背景色：rgba（255,255,255,0.15）; #adventDoors li a.disabled border-color：＃b6fe98;背景色：rgba（196、254、171、0.15）。色：＃b6fe98。カーソル：デフォルト。 

ステップ5 - グローバル変数を作成する

これ以降のステップでは、 scripts / calendar.js それでは、ファイルを開いてみましょう。私たちのアドベントカレンダーは2つのグローバル変数を使用します.

の myCal variableはカレンダー画像をJSオブジェクトとして保持します。画像は既にに追加されています index.html ステップ2でファイルを作成します。ステップ7でこの画像の上にドアを置きます。関連するHTMLをキャプチャします。 でマークされた要素 “adventCal” DOMメソッドgetElementById（）を使用して識別子を取得します。の myCal 変数はHTMLImageElement DOMオブジェクトになります.

の 現在の日付 変数は現在の日付を保持するので、スクリプトでドアを有効にするか無効にするかを簡単に決定できます。作成する 現在の日付 Date JavaScriptクラスの新しいオブジェクトをインスタンス化します.

次のコードスニペットをあなたの上に置きます。 calendar.js ファイル.

 var myCal = document.getElementById（ "adventCal"）; var currentDate = new Date（）;

ステップ6 - 作成 “ドア” クラス

24個のドアが必要なので、これを行うための最も簡単な方法は、 “ドア” クラスを作成し、後で24回インスタンス化する.

私たちのドアクラスには2つのパラメータがあります, カレンダー そして 日. のために カレンダー パラメータとして、背景として機能するクリスマス画像を渡す必要があります。のために 日 パラメータ12月の現在の日を整数の形式で渡す必要があります。.

24個のDoorオブジェクトのインスタンス化中に、最後のステップ（ステップ8）でパラメーターの正確な値を渡します。.

Doorクラスに5つのプロパティと1つのメソッドを作ります。このステップでは、5つのプロパティのみを見ていきます。 コンテンツ（） 次のステップの方法.

の “幅” ＆ “高さ” プロパティ

の 幅 そして 高さ プロパティは個々のドアの幅と高さを動的に計算します（背景画像の幅と高さによって変わります）。.

0.1と0.95の乗数は、余白の余白、各ドアの間、カレンダの側面の周囲にも余裕を持たせるための式です。.

の “adventMessage” 財産

の adventMessage プロパティには、アラートメッセージの内容、つまり引用符と一致する著者が含まれます。 messages.js ファイルが保持されます。の adventMessage プロパティから引用と著者を取ります メッセージ[] 現在の日付に応じた配列.

12月1日 adventMessage propertyは、外側の配列の最初の要素を取ります。 メッセージ[0], JavaScriptでは配列はゼロから始まるため.

同じ理由で、12月1日の見積もりは メッセージ[0] [0] （内側の配列の最初の要素）そして一致する作者は次のように到達することができます。 メッセージ[0] [1] （内部配列の2番目の要素）.

の “バツ”＆”よ” プロパティ

プロパティ バツ そして よ 次の手順で使用する各ドアの適切な位置を 上 そして 左 CSSのプロパティこれらは補完します 位置：相対 そして 位置：絶対 CSSでは、ステップ4で設定したドアコンテナ（ul＃adventDoors）とドア自体（#adventDoors li）をルール化しています。計算は少々威圧的に思えるかもしれませんが、それらを素早く見ていきましょう。.

の バツ プロパティによって使用されます 左 次のステップのCSSポジショニングプロパティ（ステップ7）。個々のドアをX軸上のどこに配置する必要があるかをピクセル単位で決定します。.

それは背景画像の幅を取ります、そしてそれはそれのために少しマージンを残します（4％）。それから、剰余演算子の助けを借りて、それがどの列に配置されるかを評価し（4つの列があることを忘れないでください）、最後に1.1乗数を使用して各個別ドアに少し（10％）のマージンを加えます。.

同じように、 よ プロパティによって使用されます 上 CSSの配置プロパティ。同様に、個々のドアをY軸上に配置する必要がある場所をピクセル単位で決定します。.

渡されたのheightプロパティを使って背景画像の高さを取得します。 カレンダー （DOMオブジェクトを保持する）パラメータで、カレンダの垂直辺の周囲に4％の余白を残します。.

次に、Math.floor（）メソッドを使用して、特定のDoorオブジェクトがどの行になるかを計算します（6行になります）。.

最後に、1.1の乗数を使用して高さを乗算することによって、各Doorオブジェクトに10％のマージンを追加します。.

 関数Door（calendar、day）this.width =（（calendar.width  -  0.1 * calendar.width）/ 4）* 0.95; this.height =（（calendar.height  -  0.1 * calendar.height）/ 6）* 0.95; this.adventMessage = 'Day' + day + 'of Advent \ n \ n' + '"' +件のメッセージ[day  -  1] [0] + '" \ n \ n \ t' + 'by' + messages [day -  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）; node.id = "door" + day; node.style.cssText = "幅：" + this.width + "px;高さ：" + this.height + "px;上：" + this.y + "px;左：" + this.x + "px ; "; var innerNode = document.createElement（ "a"）; document.getElementById（ "door" + day）.appendChild（innerNode）; innerNode.innerHTML = day; 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 = [];（var i = 0; iの場合） < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();