Resmin altına, boş bir sıralanmamış liste koyarız. “adventDoors” scriptler tarafından doldurulacak id seçici. Kullanıcı, tarayıcısında JavaScript’i etkinleştirmediyse, basit bir Noel resmi göreceklerdir..

            
 
Advent Takvimi
  
 
     

Adım 3 - doldurun “Mesajlar” Dizi

Doldurmak için 24 Noel fiyatına ihtiyacımız var. “mesajları” dizi. GoodReads’tan benimkini seçtim.

Aç komut / messages.js dosya; teklifleri işlevsellikten ayrı tutmak için buraya koyacağız. mesajları dizi, bir dizinin içindeki bir dizidir, dış dizinin her öğesi iki öğeli başka bir dizi içerir: bir alıntı ve yazarı.

Diziyi, aşağıdaki sözdizimine göre en sevdiğiniz alıntılarla doldurun:

 var messages = [["Alıntı 1", "Yazar 1"], ["Alıntı 2", "Yazar 2"],… ["Alıntı 24", "Yazar 24"]];

Adım 4 - Kapılar İçin Temel CSS Stilleri Ekleme

Kapılar için gerekli CSS stillerini oluşturmak için, kapının kendisi aşağıdaki adımlarda JavaScript ile oluşturulacağından son tasarımı düşünmeliyiz..

Doğru şekilde 4 sütun ve 6 sıra dikdörtgen oluşturmamız gerekiyor. Bunun için kullanacağız pozisyon: göreceli ve pozisyon: mutlak CSS kuralları Kesin konum kapıdan kapıya değişeceği için, üst, alt, ayrıldı, ve sağ JavaScript’teki özellikler, CSS’de kabına göreceli bir konum (HTML’deki sıralanmamış liste) ve liste öğeleri için mutlak pozisyonlar (JS’ye de eklenecektir) eklememiz yeterli.

Stil sayfası dosyasındaki diğer önemli şey ise engelliler ve etkin durumlar için farklı bir tasarım oluşturun. .engelli JavaScript tarafından engellilere seçici eklenecek.

Demo Takvimim için, gezinip taşırken şeffaf bir beyaz arka plana sahip etkin kapılar için düz beyaz bir kenarlık ve beyaz yazı tipleri belirledim; ve açık yeşil kenarlık, yazı tipleri ve engelli olanlar için şeffaf açık yeşil arka plan. Bu tasarımı beğenmediyseniz, renkleri ve stilleri isteğinize göre değiştirebilirsiniz.

Aşağıdaki kodu (veya değiştirilmiş stil kurallarınızı) telefonunuza yerleştirin. style.css dosya.

 ul # adventDoors position: relatif; liste tarzı: yok; dolgu maddesi: 0; marj: 0;  #adventDoors li position: absolute;  #adventDoors li a color: #fff; genişlik:% 100; yükseklik:% 100; yazı tipi boyutu: 24 piksel; metin hizalama: orta; ekran: esnek; esnek yön: sütun; haklı içerik: merkez; metin dekorasyon: yok; sınır: 1px #fff katı;  #adventDoors li a: not (.disabled): hover color: #fff; arka plan rengi: saydam; arkaplan rengi: rgba (255,255,255,0.15);  #adventDoors li a.disabled border-color: # b6fe98; arkaplan rengi: rgba (196,254,171,0.15); renk: # b6fe98; imleç: varsayılan; 

Adım 5 - Global Değişkenleri Yaratın

Bu adımdan sonra, yalnızca komut / calendar.js dosya, öyleyse şimdi açalım şunu. Advent Takvimimiz iki global değişken kullanacak.

myCal değişkeni, Takvim görüntüsünü bir JS nesnesi olarak tutar. Resim zaten eklenmiş index.html Adım 2'deki dosya. 7. kapıdaki bu görüntünün kapısını koyacağız. İlgili HTML'yi yakalayacağız ile işaretlenmiş öğeyi “adventCal” tanımlayıcısı getElementById () DOM yöntemini kullanarak. myCal değişkeni bir HTMLImageElement DOM nesnesi olacak.

Geçerli tarih değişkeni geçerli tarihi tutar, böylece komut dosyası bir kapının etkin mi yoksa devre dışı mı olması gerektiğine kolayca karar verebilir. Yaratmak Geçerli tarih Date JavaScript sınıfının yeni bir nesnesini başlattık.

Aşağıdaki kod parçacığını calendar.js dosya.

 var myCal = document.getElementById ("adventCal"); var currentDate = yeni Tarih ();

Adım 6 - Oluştur “Kapı” Sınıf

24 kapıya ihtiyaç duyduğumuzda, bunu yapmanın en kolay yolu “Kapı” sınıf ve daha sonra 24 kez başlat.

Kapı sınıfımızın iki parametresi vardır, takvim ve gün. İçin takvim parametre arka plan olarak işlev görecek Noel görüntüsünü geçmemiz gerekecek. İçin gün parametrenin Aralık ayının gününü tam sayı biçiminde geçirmemiz gerekecek.

24 Kapı nesnesinin somutlaştırılması sırasında, son adımdaki (Adım 8) parametrelerin tam değerlerini geçeceğiz..

Door sınıfı için 5 özellik ve 1 yöntem yapacağız. Bu adımda sadece 5 özellikten geçeceğiz ve İçerik () Bir sonraki adımda yöntem.

“Genişlik” & “yükseklik” özellikleri

Genişlik ve yükseklik özellikler, her bir kapının genişliğini ve yüksekliğini dinamik olarak hesaplar (arka plan görüntüsünün genişliğine ve yüksekliğine göre değişir).

0.1 ve 0.95 çarpanları, kenar boşlukları için, her bir kapı arasında ve Takvim'in yanlarında da boşluk bırakma denklemindedir..

“adventMessage” özellik

adventMessage özelliği, mesajların içeriğini, yani alıntıları ve eşleşen yazarları içeriyor. messages.js dosya tutar. adventMessage mülk bir alıntı alır ve yazar mesajları [] geçerli tarihe bağlı olarak dizi.

1 Aralık için adventMessage özellik, dış dizinin ilk öğesini alır. mesajları [0], JavaScript'te sıfır tabanlı olduğundan.

Aynı sebepten, 1 Aralık’taki fiyat teklifi mesajları [0] [0] (iç dizinin ilk elemanı) ve eşleşen yazara, mesajları [0] [1] (iç dizinin ikinci elemanı).

“x”&”y” özellikleri

Özellikleri x ve y ayarlamak için bir sonraki adımda kullanacağımız her bir kapının uygun pozisyonlarını tutun. üst ve ayrıldı CSS özellikleri Bunlar tamamlayacak pozisyon: göreceli ve pozisyon: mutlak Kapı konteyneri (ul # adventDoors) ve kapılar için kendileri (#adventDoors li) için 4. Adımda belirlediğimiz CSS kuralları. Hesaplamalar biraz korkutucu görünebilir, ama hadi hızlıca geçelim.

x mülkiyet tarafından kullanılacak ayrıldı Bir sonraki adımda CSS konumlandırma özelliği (Adım 7). Tek bir Kapının x eksenine yerleştirilmesi gereken piksel cinsinden belirler.

Arka plan görüntüsünün genişliğini alır ve bunun için küçük bir kenar boşluğu bırakır (% 4). Daha sonra kalan operatör yardımıyla, hangi sütunun içine yerleştirileceğini değerlendirir (unutmayın, 4 sütun olacak) ve nihayet 1.1 çarpanı kullanarak her bir Kapıya bir miktar (% 10) marj ekler..

Aynı şekilde, y mülkiyet tarafından kullanılacak üst CSS konumlandırma özelliği ve aynı şekilde tek bir Kapının y eksenine yerleştirilmesi gereken piksel cinsinden belirler.

Geçişin height özelliği ile arka plan görüntüsünün yüksekliğini alırız. takvim parametresini (bir DOM nesnesini tutar) ve Takvim'in dikey kenarlarında% 4 kenar boşluğu bırakın.

Daha sonra, Math.floor () yönteminin yardımıyla, belirli bir Door nesnesinin hangi satırda olacağını (6 satır olacak) hesaplarız..

Sonunda, 1.1 çarpıcı kullanarak yüksekliğini çarparak her Door nesnesi için% 10 marj ekleriz..

 işlev Kapı (takvim, gün) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'Gün' + gün + ', Advent \ n \ n' + '"' + mesajları [gün - 1] [0] + '" \ n \ n \ t' + '-' + ileti [gün - 1] [1] + '\ n \ n'; this.x = (0.04 * calendar.width + ((gün - 1)% 4) * (1.1 * bu genişlik)); this.y = - (0.96 * calendar.height - Math.floor ((gün - 1) / 4) * (1.1 * this.height)); this.content = function () …; 

Adım 7 - Doldurun “İçerik ()” Yöntem

O İçerik () Kapılarımızı tarayıcıda gösterecek yöntem. Öncelikle, değişkenin yardımıyla yeni bir DOM düğümü yaratıyoruz. düğüm Bu yaratacak

 this.content = function () var node = document.createElement ("li"); document.getElementById ( "adventDoors") appendChild (düğüm).; node.id = "kapı" + gün; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; sol:" + this.x + "px ; '; var innerNode = document.createElement ("a"); document.getElementById ("kapı" + gün) .appendChild (innerNode); innerNode.innerHTML = gün; 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 = []; for (var i = 0; i < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();