ด้านล่างของภาพเราวางรายการที่ไม่มีการเรียงลำดับที่ว่างเปล่าด้วย “adventDoors” id selector ที่จะถูกบรรจุโดยสคริปต์ หากผู้ใช้ไม่ได้เปิดใช้งาน JavaScript ในเบราว์เซอร์ของพวกเขาพวกเขาก็จะเห็นภาพคริสต์มาสง่ายๆ.

            
 
ปฏิทินจุติ
  
 
     

ขั้นตอนที่ 3 - เติม “ข้อความ” แถว

เราต้องการใบเสนอราคาคริสต์มาส 24 ใบเพื่อเติมเต็ม “ข้อความ” แถว ฉันเลือกของฉันจาก GoodReads.

เปิด สคริปต์ / messages.js ไฟล์; เราจะใส่เครื่องหมายคำพูดไว้ที่นี่เพื่อให้แยกจากการทำงาน ข้อความ อาเรย์เป็นอาร์เรย์ภายในอาเรย์แต่ละองค์ประกอบของอาเรย์ด้านนอกจะมีอาเรย์อีกอันที่มีสองอิลิเมนต์: อัญประกาศและผู้แต่ง.

เติมอาร์เรย์ด้วยคำพูดที่คุณชื่นชอบตามไวยากรณ์ต่อไปนี้:

 ข้อความ var = [["ใบเสนอราคา 1", "ผู้แต่ง 1"], ["ใบเสนอราคา 2", "ผู้แต่ง 2"], ... ["ใบเสนอราคา 24", "ผู้แต่ง 24"]];

ขั้นตอนที่ 4 - เพิ่มสไตล์ CSS พื้นฐานสำหรับประตู

ในการสร้างสไตล์ CSS ที่จำเป็นสำหรับประตูเราจำเป็นต้องจินตนาการถึงการออกแบบขั้นสุดท้ายเนื่องจากตัวประตูจะถูกสร้างขึ้นด้วย JavaScript ในขั้นตอนต่อไปนี้.

เราจำเป็นต้องสร้าง 4 คอลัมน์และ 6 แถวของสี่เหลี่ยมในการจัดตำแหน่งที่เหมาะสม สำหรับสิ่งนี้เราจะใช้ ตำแหน่ง: ญาติ และ ตำแหน่ง: แน่นอน กฎ CSS เนื่องจากตำแหน่งที่แน่นอนจะเปลี่ยนประตูเราจะเพิ่ม ด้านบน, ด้านล่าง, ซ้าย, และ ขวา คุณสมบัติใน JavaScript ใน CSS เราเพียงแค่ต้องเพิ่มตำแหน่งสัมพัทธ์ในคอนเทนเนอร์ (รายการที่ไม่ได้เรียงใน HTML) และตำแหน่งที่แน่นอนสำหรับองค์ประกอบรายการ.

สิ่งสำคัญอื่น ๆ ในไฟล์สไตล์ชีทคือ สร้างการออกแบบที่แตกต่างกันสำหรับคนพิการและสถานะที่เปิดใช้งาน. .พิการ ตัวเลือกจะถูกเพิ่มไปยัง JavaScript โดยปิดการใช้งาน.

สำหรับปฏิทินตัวอย่างของฉันฉันตั้งค่าเส้นขอบสีขาวทึบและสีขาวแบบอักษรสำหรับประตูที่เปิดใช้งานที่มีพื้นหลังสีขาวโปร่งใสในการวางเมาส์ไว้ และเส้นขอบสีเขียวอ่อนและแบบอักษรและพื้นหลังสีเขียวอ่อนสำหรับคนพิการ หากคุณไม่ชอบดีไซน์นี้คุณสามารถเปลี่ยนสีและสไตล์ตามความต้องการของคุณ.

วางรหัสต่อไปนี้ (หรือกฎสไตล์ของคุณ) ลงในของคุณ style.css ไฟล์.

 ul # AdventDoors ตำแหน่ง: ญาติ; รายการสไตล์: ไม่มี; การเติมเต็ม: 0; กำไรขั้นต้น: 0;  #adventDoors li position: absolute;  #adventDoors li a color: #fff; ความกว้าง: 100%; ความสูง: 100%; ขนาดตัวอักษร: 24px; จัดข้อความ: ศูนย์; แสดงผล: ดิ้น; ดิ้นทิศทาง: คอลัมน์; ปรับเนื้อหา: ศูนย์; การตกแต่งข้อความ: ไม่มี; เส้นขอบ: 1px #fff solid;  #adventDoors li a: not (.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” identifier โดยใช้เมธอด getElementById () myCal ตัวแปรจะเป็นวัตถุ DOM ของ HTMLImageElement.

วันที่ปัจจุบัน ตัวแปรถือวันที่ปัจจุบันเพื่อให้สคริปต์ของเราสามารถตัดสินใจได้ง่ายว่าควรเปิดใช้งานหรือปิดการใช้งานประตูหรือไม่ เพื่อสร้าง วันที่ปัจจุบัน เรายกตัวอย่างวัตถุใหม่ของคลาส Date JavaScript.

วางข้อมูลโค้ดต่อไปนี้ไว้ด้านบนของคุณ calendar.js ไฟล์.

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

ขั้นตอนที่ 6 - สร้าง “ประตู” ชั้น

เนื่องจากเราต้องการประตู 24 บานวิธีที่ตรงไปตรงมาที่สุดในการสร้างคือ “ประตู” ชั้นเรียนและต่อมายกตัวอย่างมัน 24 ครั้ง.

คลาส Door ของเรามีสองพารามิเตอร์, ปฏิทิน และ วัน. สำหรับทาง ปฏิทิน พารามิเตอร์ที่เราจะต้องผ่านภาพคริสต์มาสที่จะทำหน้าที่เป็นพื้นหลัง สำหรับทาง วัน พารามิเตอร์เราจะต้องผ่านวันที่ปัจจุบันของเดือนธันวาคมในรูปแบบของจำนวนเต็ม.

เราจะส่งค่าที่แน่นอนของพารามิเตอร์ในขั้นตอนสุดท้าย (ขั้นตอนที่ 8) ในระหว่างการสร้างอินสแตนซ์ของวัตถุ 24 ประตู.

เราจะสร้าง 5 คุณสมบัติและ 1 วิธีสำหรับคลาส Door ในขั้นตอนนี้เราจะผ่าน 5 คุณสมบัติเท่านั้นและฉันจะอธิบาย เนื้อหา() วิธีการในขั้นตอนต่อไป.

“ความกว้าง” & “ความสูง” คุณสมบัติ

ความกว้าง และ ความสูง คุณสมบัติคำนวณความกว้างและความสูงของประตูแต่ละบานแบบไดนามิก (เปลี่ยนแปลงตามความกว้างและความสูงของภาพพื้นหลัง).

ตัวคูณ 0.1 และ 0.95 อยู่ในสมการเพื่อเว้นช่องว่างสำหรับระยะขอบระหว่างแต่ละประตูและรอบ ๆ ด้านข้างของปฏิทินเช่นกัน.

“adventMessage” คุณสมบัติ

adventMessage พร็อพเพอร์ตี้เก็บเนื้อหาของข้อความแจ้งเตือนคือราคาและผู้เขียนที่ตรงกันที่เรา messages.js ถือไฟล์ adventMessage สถานที่ให้บริการจะอ้างและผู้เขียนจาก ข้อความ [] อาร์เรย์ขึ้นอยู่กับวันที่ปัจจุบัน.

สำหรับวันที่ 1 ธันวาคม adventMessage คุณสมบัติใช้องค์ประกอบแรกของอาร์เรย์ด้านนอกซึ่งก็คือ ข้อความ [0], ในฐานะที่เป็นอาร์เรย์เป็นศูนย์ใน JavaScript.

ด้วยเหตุผลเดียวกันการเสนอราคาสำหรับวันที่ 1 ธันวาคมอยู่ในตำแหน่ง ข้อความ [0] [0] (องค์ประกอบแรกของอาร์เรย์ภายใน) และผู้เขียนที่ตรงกันสามารถเข้าถึงได้เป็น ข้อความ [0] [1] (องค์ประกอบที่สองของอาร์เรย์ภายใน).

“x”&”Y” คุณสมบัติ

คุณสมบัติ x และ Y ดำรงตำแหน่งที่เหมาะสมของแต่ละประตูที่เราจะใช้ในขั้นตอนถัดไปเพื่อตั้งค่า ด้านบน และ ซ้าย คุณสมบัติ CSS สิ่งเหล่านี้จะเสริม ตำแหน่ง: ญาติ และ ตำแหน่ง: แน่นอน กฎ CSS ที่เรากำหนดไว้ในขั้นตอนที่ 4 สำหรับที่เก็บประตู (ul # AdventDoors) และประตูตัวเอง (#adventDoors li) การคำนวณอาจดูค่อนข้างน่ากลัว แต่เรามาดูกันอย่างรวดเร็ว.

x คุณสมบัติจะถูกใช้โดย ซ้าย คุณสมบัติการวางตำแหน่ง 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) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'วัน' + วัน + 'จุติ \ n \ n' + '"+ ข้อความ [วัน - 1] [0] +'" \ n \ n \ t '+' โดย '+ ข้อความ [วัน - 1] [1] + '\ n \ n'; this.x = (0.04 * calendar.width + ((วัน - 1)% 4) * (1.1 * this.width)); this.y = - (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"); 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 ("ประตู" + วัน). 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 = []; สำหรับ (var i = 0; i < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();