أسفل الصورة نضع قائمة غير مرتبة فارغة مع “adventDoors” معرف محدد سيتم ملؤها بواسطة البرامج النصية. إذا لم يكن المستخدم مُمكّنًا JavaScript في المستعرض الخاص بهم ، فسيظهر فقط صورة عيد الميلاد بسيطة.

            
 
تقويم قدوم
  
 
     

الخطوة 3 - ملء “رسائل” مجموعة مصفوفة

نحن بحاجة إلى 24 يقتبس عيد الميلاد لملء “رسائل” مجموعة مصفوفة. اخترت لي من GoodReads.

افتح ال مخطوطات / messages.js ملف؛ سنضع علامات الاقتباس هنا لإبقائها منفصلة عن الوظيفة. ال رسائل الصفيف هو صفيف داخل صفيف ، يحتوي كل عنصر من الصفيف الخارجي على صفيف آخر مع عنصرين: اقتباس ، ومؤلفه.

املأ المصفوفة بعلامات اقتباس المفضلة وفقًا للبناء التالي:

 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 ، أيضًا).

الشيء المهم الآخر في ملف ورقة الأنماط هو إنشاء تصميم مختلف للمعاقين والحالات الممكّنة. ال .معاق سيتم إضافة المحدد إلى المعوقين بواسطة جافا سكريبت.

بالنسبة للتقويم التجريبي ، قمت بتعيين حدود بيضاء صلبة وخطوط بيضاء للأبواب الممكّنة بخلفية بيضاء شفافة على التحويم ؛ وحدود lightgreen ، والخطوط ، وخلفية lightgreen شفافة للأشخاص المعاقين. إذا كنت لا تحب هذا التصميم ، يمكنك تغيير الألوان والأنماط وفقًا لرغبتك.

ضع الكود التالي (أو قواعد النمط المعدلة) في style.css ملف.

 ul # adventDoors موقف: نسبي؛ نمط القائمة: لا شيء ؛ الحشو: 0؛ الهامش: 0  #adventDoors li position: absolute؛  #adventDoors li a color: #fff؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ حجم الخط: 24 بكسل ؛ محاذاة النص: المركز ؛ عرض: المرن. فليكس الاتجاه: العمود. تبرير المحتوى: المركز ؛ زخرفة النص: لا شيء ؛ الحدود: 1px # ff صلب ؛  #adventDoors li a: not (.disabled): hover color: #fff؛ لون الخلفية: شفاف. لون الخلفية: rgba (255،255،255،0.15) ؛  #adventDoors li a.disabled border-color: # b6fe98؛ لون الخلفية: rgba (196254171.15) ؛ اللون: # b6fe98 ؛ المؤشر: الافتراضي ؛ 

الخطوة 5 - إنشاء المتغيرات العالمية

من هذه الخطوة ، سنعمل فقط مع مخطوطات / calendar.js ملف ، لذلك دعونا الآن فتح هذا الأمر. سيستخدم تقويم التقويم الخاص بنا اثنين من المتغيرات العامة.

ال myCal متغير يحمل صورة التقويم ككائن JS. تمت بالفعل إضافة الصورة إلى index.html و ملف في الخطوة 2. سنضع الأبواب على هذه الصورة في الخطوة 7. نحن التقاط HTML ذات الصلة عنصر ملحوظ مع “adventCal” المعرف باستخدام الأسلوب getElementById () DOM. ال myCal سيكون المتغير كائن HTMLImageElement DOM.

ال التاريخ الحالي يحمل المتغير التاريخ الحالي حتى يتسنى لبرنامجنا النصي تحديد ما إذا كان ينبغي تمكين الباب أو تعطيله. لنصنع او لنبتكر التاريخ الحالي نحن إنشاء مثيل جديد لكائن جافا سكريبت Date.

ضع مقتطف الشفرة التالي في الجزء العلوي من calendar.js ملف.

 var myCal = document.getElementById ("adventCal")؛ var currentDate = تاريخ جديد () ؛

الخطوة 6 - إنشاء “باب” صف دراسي

بما أننا نحتاج إلى 24 بابًا ، فإن الطريقة الأكثر مباشرة للقيام بذلك هي إنشاء أ “باب” الطبقة ، ثم إنشاء مثيل لها 24 مرة.

فئة الباب لدينا اثنين من المعلمات, التقويم و يوم. ل التقويم المعلمة سنحتاج إلى تمرير صورة عيد الميلاد التي ستعمل كخلفية. ل يوم المعلمة سنحتاج لتمرير اليوم الحالي من ديسمبر في شكل عدد صحيح.

سنقوم بتمرير القيم الدقيقة للمعلمات في الخطوة الأخيرة (الخطوة 8) ، أثناء إنشاء مثيل لـ 24 Door Object.

سنبذل 5 خصائص وطريقة 1 لفئة الباب. في هذه الخطوة ، سنتناول 5 خصائص فقط ، وسأشرح لك يحتوى() الطريقة في الخطوة التالية.

ال “عرض” و “ارتفاع” الخصائص

ال عرض و ارتفاع تقوم الخصائص بحساب عرض وارتفاع كل باب فردي ديناميكيًا (يتغير ذلك وفقًا لعرض وارتفاع صورة الخلفية).

في المعادلات 0.1 و 0.95 في المعادلة لترك بعض المساحة للهوامش ، بين كل الأبواب ، وحول جوانب التقويم ، أيضا.

ال “adventMessage” خاصية

ال adventMessage خاصية يحمل محتوى رسائل التنبيه ، وهي يقتبس والمؤلفين مطابقة أن لدينا messages.js ملف يحمل. ال adventMessage الخاصية يأخذ اقتباس ومؤلف من رسائل [] مجموعة ، اعتمادا على التاريخ الحالي.

لديسمبر 1 adventMessage تأخذ الخاصية العنصر الأول للصفيف الخارجي وهو رسائل [0], كما صفائف تستند إلى صفر في JavaScript.

للسبب نفسه ، يتم وضع علامة اقتباس لـ 1 ديسمبر كـ رسائل [0] [0] (العنصر الأول للصفيف الداخلي) ، ويمكن الوصول إلى المؤلف المطابق كـ رسائل [0] [1] (العنصر الثاني من مجموعة الداخلية).

ال “س”و”ذ” الخصائص

الخصائص س و ذ شغل المواضع المناسبة لكل باب سنستخدمه في الخطوة التالية لضبط أعلى و اليسار خصائص CSS. هذه سوف تكمل الموقف: نسبي و الموقف: المطلق قواعد CSS التي وضعناها في الخطوة 4 لحاوية الباب (ul # adventDoors) ، والأبواب نفسها (#adventDoors li). قد تبدو الحسابات مخيفة إلى حد ما ، ولكن دعنا نذهب إليها بسرعة.

ال س وسوف تستخدم الممتلكات من قبل اليسار خاصية تحديد موضع CSS في الخطوة التالية (الخطوة 7). يحدد بالبكسل حيث يجب وضع باب فردي على المحور السيني.

يستغرق عرض صورة الخلفية ، ويترك هامشًا بسيطًا لها (4٪). وبعد ذلك بمساعدة المشغل الباقي ، يقوم بتقييم العمود الذي سيتم وضعه فيه (تذكر أنه سيكون هناك 4 أعمدة) ، وأخيراً يضيف هامشًا قليلاً (10٪) إلى كل باب على حدة باستخدام 1.1 مضاعف.

بنفس الطريقة ، و ذ وسوف تستخدم الممتلكات من قبل أعلى خاصية تحديد موضع CSS ، وكذلك تحدد بالبكسل حيث يجب وضع باب فردي على المحور ص.

نأخذ ارتفاع صورة الخلفية بمساعدة خاصية الارتفاع للمرور فيها التقويم المعلمة (التي تحتوي على كائن DOM) ، وترك هامش 4 ٪ حول الجوانب الرأسية للتقويم.

بعد ذلك ، بمساعدة طريقة Math.floor () نحسب في أي صف سيكون كائن باب معين (سيكون هناك 6 صفوف).

أخيرًا ، نضيف هامشًا بنسبة 10٪ لكل كائن Door عن طريق ضرب ارتفاعه باستخدام مضاعف 1.1.

 وظيفة الباب (التقويم ، اليوم) 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' + 'بواسطة' + messages [day - 1] [1] + '\ n \ n'؛ this.x = (0.04 * calendar.width + ((اليوم - 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 = "door" + day ؛ node.style.cssText = "width:" + this.width + "px؛ height:" + this.height + "px؛ top:" + this.y + "px؛ left:" + this.x + "px . ". var innerNode = document.createElement ("a")؛ document.getElementById ("door" + day) .appendChild (innerNode)؛ innerNode.innerHTML = يوم ؛ innerNode.href = "#"؛ إذا ((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; )();