מתחת לתמונה אנו מניחים רשימה לא מסודרת ריקה עם “הרפתקאות” מזהה מזהה כי יהיה מאוכלס על ידי סקריפטים. אם למשתמש אין JavaScript מאופשר בדפדפן שלו, הוא יראה תמונה פשוטה של ​​חג המולד.

            
 
לוח שנה הופעה
  
 
     

שלב 3 - לאכלס את “הודעות” מערך

אנחנו צריכים 24 ציטוטים חג המולד כדי לאכלס את “הודעות” מערך. בחרתי את שלי מ- GoodReads.

פתח את ה סקריפטים / הודעות קובץ; אנו נציב את המרכאות כאן כדי לשמור אותן בנפרד מהפונקציונליות. ה הודעות מערך הוא מערך בתוך מערך, כל רכיב במערך החיצוני מכיל מערך נוסף עם שני אלמנטים: ציטוט, ומחברו.

לאכלס את המערך עם ציטוטים האהובים עליך על פי התחביר הבא:

 [= "ציטוט 1", "מחבר 1"], ["ציטוט 2", "מחבר 2"], ... ["ציטוט 24", "מחבר 24"]];

שלב 4 - הוסף בסיסי CSS סגנונות עבור דלתות

כדי ליצור את סגנונות CSS הדרושים עבור הדלתות אנחנו צריכים לדמיין את העיצוב הסופי, כמו הדלתות עצמן ייווצר עם JavaScript בשלבים הבאים.

אנחנו צריכים ליצור 4 עמודות ו 6 שורות של מלבנים יישור הנכון. לשם כך, נשתמש מיקום: יחסית וה משרה מוחלטת כללי CSS. כמו המיקום המדויק ישתנה הדלת על ידי הדלת, נוסיף את חלק עליון, בתחתית, שמאלה, ו ימין תכונות ב- JavaScript, ב- CSS אנחנו רק צריכים להוסיף מיקום יחסי למכולה (רשימה לא מסודרת ב- HTML), וכן עמדות מוחלטות עבור אלמנטים ברשימה (הם יתווספו גם JS).

הדבר החשוב השני בקובץ הסגנונות הוא ליצור עיצוב אחר עבור נכים ומצבים מופעלת. ה .מושבת סלקטור יתווסף ל- JavaScript מושבת.

עבור הדגמה שלי לוח שנה אני קובע גבול לבן מוצק וגופנים לבנים עבור דלתות מופעלת עם רקע לבן שקוף על ריחוף; ואת הגבול lightgreen, וגופנים, רקע lightgreen שקוף עבור נכים. אם אתה לא אוהב את העיצוב הזה אתה יכול לשנות את הצבעים ואת סגנונות בהתאם לרצונך.

מקם את הקוד הבא (או את כללי הסגנון שלך) style.css קובץ.

 ul # adventDoors עמדה: יחסית; style-style: none; ריפוד: 0; שוליים: 0;  #adventDoors li position: מוחלט;  #adventDoors li a color: #fff; רוחב: 100%; גובה: 100%; font-size: 24px; text-align: center; התצוגה כ flex-direction: העמוד; justify-content: center; text-decoration: none; border: 1px #fff solid;  #adventDoors li: לא (.disabled): העבר את העכבר color: #fff; צבע רקע: שקוף; צבע רקע: rgba (255,255,255,0.15);  #adventDoors li a.disabled border-color: # b6fe98; צבע רקע: rgba (196,254,171,0.15); צבע: # b6fe98; הסמן: ברירת מחדל; 

שלב 5 - יצירת המשתנים הגלובליים

משלב זה ואילך, אנו נפעל רק עם סקריפטים / calendar.js קובץ, אז עכשיו בואו לפתוח את זה. לוח השנה שלנו ישתמש בשני משתנים גלובליים.

ה myCal משתנה מחזיקה את תמונת לוח השנה כאובייקט JS. התמונה כבר נוספה ל- index.html קובץ בשלב 2. נציב את הדלתות על גבי התמונה הזו בשלב 7. אנחנו ללכוד את HTML הקשורים אלמנט המסומן ב- “adventCal” מזהה באמצעות שיטת getElementById () DOM. ה myCal משתנה יהיה אובייקט HTMLImageElement DOM.

ה דייט נוכחי משתנה מחזיקה את התאריך הנוכחי, כך התסריט שלנו יכול בקלות להחליט אם הדלת צריכה להיות מופעלת או מושבתת. ליצור דייט נוכחי אנו מייצרים אובייקט חדש של המחלקה Date JavaScript.

שים את קטע הקוד הבא בחלק העליון של הדף calendar.js קובץ.

 var myCal = document.getElementById ("adventCal"); var currentDate = תאריך חדש ();

שלב 6 - צור את “דלת” מעמד

כפי שאנו צריכים 24 דלתות, הדרך הפשוטה ביותר לעשות זאת היא ליצור “דלת” בכיתה, ולאחר מכן להמציא אותו 24 פעמים.

בכיתה שלנו הדלת יש שני פרמטרים, לוח שנה ו יום. בשביל ה לוח שנה פרמטר נצטרך להעביר את תמונת חג המולד כי יפעל כרקע. בשביל ה יום פרמטר נצטרך להעביר את היום הנוכחי של דצמבר בצורה של מספר שלם.

אנו נעביר את הערכים המדויקים של הפרמטרים בשלב האחרון (שלב 8), במהלך המופע של אובייקטים 24 דלת.

אנו נעשה 5 מאפיינים ושיטה 1 עבור הדלת בכיתה. בשלב זה נעבור רק את 5 נכסים, ואני יסביר את תוכן () שיטה בשלב הבא.

ה “רוחב” & “גובה” נכסים

ה רוחב ו גובה מאפיינים לחשב באופן דינמי את הרוחב והגובה של כל דלת בודדת (המשתנה בהתאם לרוחב ולגובה של תמונת הרקע).

מכפילי 0.1 ו 0.95 הם במשוואה כדי להשאיר קצת מקום עבור השוליים, בין כל הדלתות, סביב הצדדים של לוח השנה, מדי.

ה “הרפתקאות” נכס

ה הרפתקאות רכוש מחזיקה את התוכן של הודעות התראה, כלומר את המרכאות ואת מחברים תואמים כי msg.js קובץ מחזיקה. ה הרפתקאות רכוש לוקח ציטוט מחבר מן הודעות [] מערך, בהתאם לתאריך הנוכחי.

עבור דצמבר 1 הרפתקאות הרכוש לוקח את האלמנט הראשון של המערך החיצוני שהוא הודעות [0], כמו מערכים מבוססי אפס ב- JavaScript.

מאותה סיבה, הציטוט עבור דצמבר 1 ממוקם כמו הודעות [0] [0] (האלמנט הראשון של המערך הפנימי), ואת המחבר תואם ניתן להגיע כ הודעות [0] [1] (אלמנט שני במערך הפנימי).

ה “איקס”&”y” נכסים

נכסים איקס ו y להחזיק את עמדות הנכון של כל דלת כי נשתמש בשלב הבא כדי להגדיר את חלק עליון ו שמאלה מאפייני CSS. אלה ישלימו את מיקום: יחסית ו משרה מוחלטת כללי CSS שהצבנו בשלב 4 עבור מיכל הדלת (ul # adventDoors), ואת הדלתות עצמן (#adventDoors לי). החישובים אולי נראים קצת מאיימים, אבל בואו נלך במהירות דרכם.

ה איקס הנכס ישמש את שמאלה מיקום מיקום CSS בשלב הבא (שלב 7). הוא קובע בפיקסלים שבהם יש להציב את הדלת הפרטית על ציר ה- x.

זה לוקח את רוחב של תמונת הרקע, וזה משאיר מרווח קטן עבור זה (4%). לאחר מכן, בעזרת המפעיל הנותר, הוא מעריך באיזה עמודה תוצב (זכור, יהיו 4 עמודות), ולבסוף הוא מוסיף מרווח קטן (10%) לכל דלת בנפרד באמצעות מכפיל 1.1.

באותו אופן, y הנכס ישמש את חלק עליון מיקום CSS מיקום, וכן הוא קובע בפיקסלים שבו הדלת הפרט צריך להיות ממוקם על ציר ה- y.

אנחנו לוקחים את הגובה של תמונת הרקע בעזרת המאפיין גובה של העובר לוח שנה פרמטר (המחזיק אובייקט DOM), ולהשאיר שולי 4% סביב הצדדים האנכיים של לוח השנה.

לאחר מכן, בעזרת השיטה Math.floor () אנו לחשב באיזה שורה אובייקט דלת נתון יהיה (יהיו 6 שורות).

לבסוף אנו מוסיפים מרווח של 10% לכל אובייקט דלת על ידי הכפלת גובהו באמצעות מכפיל 1.1.

 (לוח שנה, יום) this.width = ((calendar.width - 0.1 * calendar.width) / * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage 'יום' = + יום + 'של ההתגלות \ n \ n' + ' "' + הודעות [יום - 1] [0] + '" t \ n \ n \' + 'על ידי' + הודעות [יום - 1] [1] + '\ n \ n'; this.x = (0.04 * calendar.width + ((יום - 1)% 4) * (1.1 * this.width)); (0) * * = (0.96 * calendar.height - Math.floor ((יום - 1) / 4) * (1.1 * this.height)); this.content = function () ...; 

שלב 7 - לאכלס את “תוכן ()” שיטה

זה תוכן () אשר יציג את הדלתות שלנו בדפדפן. קודם כל, אנו יוצרים צומת DOM חדש בעזרת המשתנה צומת כי תיצור את

 this.content = function () var node = document.createElement ("li"); appendChild (צומת); node.id = "דלת" + יום; node.style.cssText = "width:" + this.width + "px; גובה:" + this.height + "px; top:" + this.y + "px; left:" + this.x + "px ; var innerNode = document.createElement ("a"); document.getElementById ("door" + day). appendChild (InternalNode); innerNode.innerHTML = day; 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; )();