Bên dưới hình ảnh, chúng tôi đặt một danh sách không có thứ tự trống với “mạo hiểm” bộ chọn id sẽ được tạo bởi các tập lệnh. Nếu người dùng không bật JavaScript trong trình duyệt của họ, họ sẽ chỉ thấy một hình ảnh Giáng sinh đơn giản.

            
 
Lịch Mùa Vọng
  
 
     

Bước 3 - Dân số “Tin nhắn” Mảng

Chúng tôi cần 24 trích dẫn Giáng sinh để điền vào “tin nhắn” mảng. Tôi đã chọn của tôi từ GoodReads.

Mở script / message.js tập tin; chúng tôi sẽ đặt các trích dẫn ở đây để tách chúng khỏi chức năng. Các tin nhắn mảng là một mảng bên trong một mảng, mỗi phần tử của mảng bên ngoài chứa một mảng khác có hai phần tử: một trích dẫn và tác giả của nó.

Điền vào mảng với các trích dẫn yêu thích của bạn theo cú pháp sau:

 var message = [["Trích dẫn 1", "Tác giả 1"], ["Trích dẫn 2", "Tác giả 2"], đánh ["Trích dẫn 24", "Tác giả 24"]];

Bước 4 - Thêm kiểu CSS cơ bản cho cửa ra vào

Để tạo các kiểu CSS cần thiết cho các cánh cửa, chúng ta cần phải tưởng tượng ra thiết kế cuối cùng, vì chính các cánh cửa sẽ được tạo bằng JavaScript theo các bước sau.

Chúng ta cần tạo 4 cột và 6 hàng hình chữ nhật theo đúng hướng. Đối với điều này, chúng tôi sẽ sử dụng vị trí: tương đối và vị trí: tuyệt đối Quy tắc CSS. Vì vị trí chính xác sẽ thay đổi từng cửa, chúng tôi sẽ thêm hàng đầu, dưới cùng, trái, và đúng các thuộc tính trong JavaScript, trong CSS, chúng ta chỉ cần thêm một vị trí tương đối vào vùng chứa (danh sách không có thứ tự trong HTML) và các vị trí tuyệt đối cho các thành phần danh sách (chúng cũng sẽ được thêm vào trong JS).

Điều quan trọng khác trong tệp biểu định kiểu là tạo một thiết kế khác cho người khuyết tật và trạng thái kích hoạt. Các .tàn tật bộ chọn sẽ được thêm vào bị vô hiệu hóa bởi JavaScript.

Đối với Lịch demo của tôi, tôi đặt đường viền trắng và phông chữ màu trắng cho các cửa được bật với nền trắng trong suốt khi di chuột; và một đường viền màu xanh lá cây, và phông chữ, và một nền sáng màu trong suốt cho những người khuyết tật. Nếu bạn không thích thiết kế này, bạn có thể thay đổi màu sắc và kiểu dáng theo mong muốn của bạn.

Đặt mã sau đây (hoặc quy tắc kiểu đã sửa đổi của bạn) vào style.css tập tin.

 ul # AdventuresDoors vị trí: tương đối; danh sách kiểu: không có; đệm: 0; lề: 0;  #adventDoors li vị trí: tuyệt đối;  #adventDoors li a color: #fff; chiều rộng: 100%; chiều cao: 100%; cỡ chữ: 24px; văn bản-align: trung tâm; hiển thị: flex; hướng flex: cột; justify-content: trung tâm; trang trí văn bản: không có; viền: 1px #fff solid;  #adventDoors li a: not (.disables): hover color: #fff; màu nền: trong suốt; màu nền: rgba (255,255,255,0,15);  #adventDoors li a.disables Border-color: # b6fe98; màu nền: rgba (196.254.171,0.15); màu: # b6fe98; con trỏ: mặc định; 

Bước 5 - Tạo các biến toàn cầu

Từ bước này, chúng tôi sẽ chỉ làm việc với script / calendar.js tập tin, vì vậy bây giờ hãy mở nó lên. Lịch Mùa Vọng của chúng tôi sẽ sử dụng hai biến toàn cầu.

Các myCal biến giữ hình ảnh Lịch dưới dạng đối tượng JS. Hình ảnh đã được thêm vào index.html tập tin ở Bước 2. Chúng tôi sẽ đặt các cánh cửa vào hình ảnh này trong Bước 7. Chúng tôi chụp HTML liên quan yếu tố được đánh dấu bằng “đời phiêu lưu” định danh bằng cách sử dụng phương thức DOM getEuityById (). Các myCal biến sẽ là một đối tượng DOM HTMLImageE bổ sung.

Các ngay hiện tại biến giữ ngày hiện tại để tập lệnh của chúng tôi có thể dễ dàng quyết định xem một cửa sẽ được bật hay tắt. Để tạo ngay hiện tại chúng tôi khởi tạo một đối tượng mới của lớp JavaScript ngày.

Đặt đoạn mã sau vào đầu của bạn calendar.js tập tin.

 var myCal = document.getEuityById ("AdventuresCal"); var currentDate = ngày mới ();

Bước 6 - Tạo “Cửa” Lớp học

Vì chúng ta cần 24 cửa, cách đơn giản nhất để làm điều này là tạo ra một “Cửa” lớp, và sau đó khởi tạo nó 24 lần.

Lớp cửa của chúng tôi có hai tham số, lịch và ngày. Cho lịch tham số chúng ta sẽ cần để vượt qua hình ảnh Giáng sinh sẽ hoạt động như nền. Cho ngày tham số chúng ta sẽ cần phải vượt qua ngày hiện tại của tháng 12 dưới dạng một số nguyên.

Chúng ta sẽ chuyển các giá trị chính xác của các tham số trong bước cuối cùng (Bước 8), trong quá trình khởi tạo của 24 đối tượng Cửa.

Chúng ta sẽ tạo 5 thuộc tính và 1 phương thức cho lớp Door. Trong Bước này, chúng tôi sẽ chỉ đi qua 5 thuộc tính và tôi sẽ giải thích Nội dung() phương pháp trong Bước tiếp theo.

Các “chiều rộng” & “Chiều cao” tính chất

Các chiều rộng và Chiều cao Các thuộc tính tự động tính toán chiều rộng và chiều cao của mỗi cửa riêng lẻ (thay đổi theo chiều rộng và chiều cao của hình nền).

Các bội số 0,1 và 0,95 nằm trong phương trình để chừa một khoảng trống cho lề, giữa mỗi cửa và xung quanh các cạnh của Lịch cũng vậy.

Các “mạo hiểm” bất động sản

Các mạo hiểm thuộc tính giữ nội dung của các thông điệp cảnh báo, cụ thể là các trích dẫn và các tác giả phù hợp với chúng tôi message.js giữ tập tin. Các mạo hiểm tài sản có một trích dẫn và một tác giả từ tin nhắn [] mảng, tùy thuộc vào ngày hiện tại.

Cho ngày 1 tháng 12 mạo hiểm property lấy phần tử đầu tiên của mảng bên ngoài tin nhắn [0], vì các mảng là không dựa trên JavaScript.

Vì lý do tương tự, báo giá cho ngày 1 tháng 12 được định vị là tin nhắn [0] [0] (phần tử đầu tiên của mảng bên trong) và tác giả phù hợp có thể đạt được như tin nhắn [0] [1] (phần tử thứ hai của mảng bên trong).

Các “x”&”y” tính chất

Tính chất x và y giữ vị trí thích hợp của từng cánh cửa mà chúng ta sẽ sử dụng trong bước tiếp theo để đặt hàng đầu và trái Thuộc tính CSS. Những thứ này sẽ bổ sung cho vị trí: tương đối và vị trí: tuyệt đối Các quy tắc CSS mà chúng tôi đã đặt trong Bước 4 cho bộ chứa cửa (ul # AdventuresDoors) và chính các cửa (#adventDoors li). Các tính toán có vẻ hơi đáng sợ, nhưng hãy nhanh chóng lướt qua chúng.

Các x tài sản sẽ được sử dụng bởi trái Thuộc tính định vị CSS trong Bước tiếp theo (Bước 7). Nó xác định bằng pixel trong đó một Cửa riêng lẻ cần được đặt trên trục x.

Nó có chiều rộng của hình nền, và nó để lại một chút lề cho nó (4%). Sau đó, với sự trợ giúp của toán tử còn lại, nó đánh giá cột nào sẽ được đặt (hãy nhớ, sẽ có 4 cột) và cuối cùng, nó thêm một chút (10%) cho mỗi Cửa riêng lẻ bằng cách sử dụng hệ số nhân 1.1.

Cùng một cách, y tài sản sẽ được sử dụng bởi hàng đầu Thuộc tính định vị CSS và tương tự, nó xác định bằng pixel trong đó một Cửa riêng lẻ cần được đặt trên trục y.

Chúng tôi lấy chiều cao của hình nền với sự trợ giúp của thuộc tính chiều cao được truyền vào lịch tham số (chứa đối tượng DOM) và để lại lề 4% xung quanh các cạnh dọc của Lịch.

Sau đó, với sự trợ giúp của phương thức Math.floor (), chúng tôi tính toán hàng nào sẽ có một đối tượng Door nhất định (sẽ có 6 hàng).

Cuối cùng, chúng tôi thêm tỷ lệ 10% cho mỗi đối tượng Cửa bằng cách nhân chiều cao của nó bằng cách sử dụng hệ số nhân 1.1.

 hàm cửa this .height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this - 1] [1] + '\ n \ n'; this.x = (0,04 * calendar. thong + ((ngày - 1)% 4) * (1.1 * this. thong)); this .y = - (0.96 * calendar.height - Math.floor ((ngày - 1) / 4) * (1.1 * this.height)); this.content = function () S; 

Bước 7 - Dân số “Nội dung()” phương pháp

Nó là Nội dung() phương pháp sẽ hiển thị các cửa của chúng tôi trong trình duyệt. Trước hết, chúng tôi tạo một nút DOM mới với sự trợ giúp của biến nút điều đó sẽ tạo ra

 this.content = function () var node = document.createEuity ("li"); document.getEuityById ("AdventuresDoors"). appendChild (nút); node.id = "cửa" + ngày; node.style.cssText = "width:" + this. thong + "px; height:" + this.height + "px; top:" + this.y + "px; left:" + this.x + "px ; "; var InternalNode = document.createEuity ("a"); document.getEuityById ("cửa" + ngày) .appendChild (InternalNode); InternalNode.innerHTML = ngày; InternalNode.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;   ;

 (hàm () var cửa = []; for (var i = 0; i < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();