छवि के नीचे हम के साथ एक खाली अनियंत्रित सूची रखते हैं “adventDoors” आईडी चयनकर्ता जो स्क्रिप्ट द्वारा पॉप्युलेट किया जाएगा। यदि उपयोगकर्ता के पास अपने ब्राउज़र में जावास्क्रिप्ट सक्षम नहीं है, तो वे बस एक साधारण क्रिसमस छवि देखेंगे.

            
 
ईसाई धर्म का कैलेंडर
  
 
     

चरण 3 - आबाद करें “संदेश” सरणी

पॉपुलेट करने के लिए हमें 24 क्रिसमस कोट्स की आवश्यकता है “संदेशों” सरणी। मैंने GoodReads से मेरा चयन किया.

को खोलो लिपियों / messages.js फ़ाइल; हम उन्हें कार्यक्षमता से अलग रखने के लिए उद्धरण यहाँ रखेंगे। संदेशों सरणी एक सरणी के अंदर एक सरणी है, बाहरी सरणी के प्रत्येक तत्व में दो तत्वों के साथ एक और सरणी होती है: एक उद्धरण, और इसका लेखक.

निम्नलिखित सिंटैक्स के अनुसार अपने पसंदीदा उद्धरणों के साथ सरणी को पॉप्युलेट करें:

 var संदेश = [["भाव 1", "लेखक 1"], ["भाव 2", "लेखक 2"], ... ["भाव 24", "लेखक 24"]];

चरण 4 - दरवाजे के लिए बेसिक सीएसएस शैलियाँ जोड़ें

दरवाजे के लिए आवश्यक सीएसएस शैलियों को बनाने के लिए हमें अंतिम डिजाइन की कल्पना करने की आवश्यकता है, क्योंकि दरवाजे स्वयं निम्नलिखित चरणों में जावास्क्रिप्ट के साथ बनाए जाएंगे।.

हमें उचित संरेखण में 4 कॉलम और आयतों की 6 पंक्तियों को बनाने की आवश्यकता है। इसके लिए, हम इसका उपयोग करेंगे स्थिति: रिश्तेदार और यह स्थिति: निरपेक्ष सीएसएस नियम। जैसे-जैसे सटीक स्थिति डोर-टू-डोर बदलती जाएगी, हम जुड़ते जाएंगे चोटी, तल, बाएं, तथा सही जावास्क्रिप्ट में गुण, सीएसएस में हमें केवल कंटेनर में एक सापेक्ष स्थिति (HTML में अव्यवस्थित सूची), और सूची तत्वों के लिए पूर्ण स्थान जोड़ने की आवश्यकता है (वे JS में भी जोड़े जाएंगे,).

स्टाइलशीट फ़ाइल में अन्य महत्वपूर्ण बात है विकलांगों और सक्षम राज्यों के लिए एक अलग डिजाइन बनाएं. .विकलांग चयनकर्ता को विकलांगों द्वारा जावास्क्रिप्ट में जोड़ा जाएगा.

मेरे डेमो कैलेंडर के लिए मैंने एक ठोस सफेद बॉर्डर और सफेद फोंट को सक्षम दरवाजे के लिए एक पारदर्शी सफेद पृष्ठभूमि के साथ मँडरा दिया; और एक हल्का सीमा, और फोंट, और विकलांगों के लिए एक पारदर्शी लाइटग्रीन पृष्ठभूमि। यदि आपको यह डिज़ाइन पसंद नहीं है तो आप अपनी इच्छा के अनुसार रंगों और शैलियों को बदल सकते हैं.

निम्नलिखित कोड (या अपनी संशोधित शैली नियम) को अपने में रखें style.css फ़ाइल.

 उल # आगमन स्थिति: रिश्तेदार; सूची-शैली: कोई नहीं; गद्दी: 0; मार्जिन: 0;  #adventDoors li स्थिति: निरपेक्ष;  #adventDoors li a color: #fff; चौड़ाई: 100%; ऊंचाई: 100%; फ़ॉन्ट-आकार: जीपीएक्स; पाठ-संरेखण: केंद्र; प्रदर्शन: फ्लेक्स; फ्लेक्स-दिशा: स्तंभ; औचित्य-सामग्री: केंद्र; पाठ-सजावट: कोई नहीं; बॉर्डर: 1px #fff सॉलिड;  #adventDoors li a: not (.disabled): होवर color: #fff; पृष्ठभूमि-रंग: पारदर्शी; पृष्ठभूमि-रंग: rgba (255,255,255,0.15);  #adventDoors li a.disabled बॉर्डर-कलर: # b6fe98; पृष्ठभूमि-रंग: आरजीबीए (196,254,171,0.15); रंग: # b6fe98; कर्सर: डिफ़ॉल्ट; 

चरण 5 - वैश्विक चर बनाएँ

इस कदम से, हम केवल साथ काम करेंगे लिपियों / calendar.js फ़ाइल, इसलिए अब इसे खोलें। हमारा एडवेंट कैलेंडर दो वैश्विक चर का उपयोग करेगा.

Mycal चर जेएस वस्तु के रूप में कैलेंडर छवि रखती है। छवि को पहले ही जोड़ दिया गया है index.html चरण 2 में फ़ाइल। हम इस छवि पर दरवाजे को चरण 7 में रखेंगे। हम संबंधित HTML पर कब्जा कर लेते हैं तत्व के साथ चिह्नित “adventCal” getElementById () DOM विधि का उपयोग करके पहचानकर्ता। Mycal वैरिएबल HTMLImageElement DOM ऑब्जेक्ट होगा.

आज की तारीख चर वर्तमान तिथि रखता है ताकि हमारी स्क्रिप्ट आसानी से तय कर सके कि क्या एक दरवाजा सक्षम या अक्षम होना चाहिए। बनाना आज की तारीख हम दिनांक जावास्क्रिप्ट वर्ग की एक नई वस्तु को तुरंत लिखते हैं.

निम्नलिखित कोड स्निपेट को अपने शीर्ष में रखें calendar.js फ़ाइल.

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

चरण 6 - बनाएँ “द्वार” कक्षा

जैसा कि हमें 24 दरवाजों की जरूरत है, ऐसा करने का सबसे सीधा तरीका है कि हम एक निर्माण करें “द्वार” वर्ग, और बाद में इसे 24 बार इंस्टेंट करें.

हमारे डोर क्लास के दो पैरामीटर हैं, कैलेंडर तथा दिन. के लिए कैलेंडर पैरामीटर हमें क्रिसमस छवि को पारित करने की आवश्यकता होगी जो पृष्ठभूमि के रूप में कार्य करेगी। के लिए दिन पैरामीटर हमें दिसंबर के वर्तमान दिन को पूर्णांक के रूप में पारित करना होगा.

हम 24 डोर ऑब्जेक्ट्स के तात्कालिकता के दौरान अंतिम चरण (चरण 8) में मापदंडों के सटीक मानों को पारित करेंगे.

हम द्वार श्रेणी के लिए 5 गुण और 1 विधि बनाएंगे। इस चरण में हम केवल 5 गुणों से गुजरेंगे, और मैं इसे समझाऊंगा सामग्री() अगले चरण में विधि.

“चौड़ाई” और “ऊंचाई” गुण

चौड़ाई तथा ऊंचाई गुण गतिशील रूप से प्रत्येक व्यक्ति के दरवाजे की चौड़ाई और ऊंचाई की गणना करते हैं (जो पृष्ठभूमि छवि की चौड़ाई और ऊंचाई के अनुसार बदलता है).

0.1 और 0.95 गुणक हाशिये के लिए कुछ जगह छोड़ने के समीकरण में हैं, प्रत्येक दरवाजे के बीच और कैलेंडर के किनारों के आसपास भी.

“adventMessage” संपत्ति

adventMessage संपत्ति अलर्ट संदेशों की सामग्री रखती है, अर्थात् उद्धरण और मिलान लेखक कि हमारे messages.js फ़ाइल रखती है। adventMessage संपत्ति से एक उद्धरण और एक लेखक लेता है संदेशों [] सरणी, वर्तमान तिथि के आधार पर.

1 दिसंबर के लिए adventMessage संपत्ति बाहरी सरणी का पहला तत्व लेती है जो है संदेशों [0], चूंकि जावास्क्रिप्ट में शून्य-आधारित हैं.

उसी कारण से, 1 दिसंबर के लिए उद्धरण के रूप में तैनात किया गया है संदेशों [0] [0] (आंतरिक सरणी का पहला तत्व), और मिलान लेखक के रूप में पहुँचा जा सकता है संदेशों [0] [1] (आंतरिक सरणी का दूसरा तत्व).

“एक्स”और”y” गुण

गुण एक्स तथा y प्रत्येक दरवाजे की उचित स्थिति को धारण करें जिसे हम अगले चरण में सेट करने के लिए उपयोग करेंगे चोटी तथा बाएं सीएसएस गुण। ये पूरक होंगे स्थिति: रिश्तेदार तथा स्थिति: निरपेक्ष सीएसएस नियम जो हम डोर कंटेनर (उल # आगमन) के लिए चरण 4 में सेट करते हैं, और दरवाजे खुद (#adventDoors li)। गणना कुछ डराने वाली लग सकती है, लेकिन चलो उनके माध्यम से जल्दी जाओ.

एक्स संपत्ति का उपयोग किया जाएगा बाएं अगले चरण (चरण 7) में सीएसएस स्थिति संपत्ति। यह पिक्सेल में निर्धारित करता है जहां एक व्यक्ति द्वार को एक्स-अक्ष पर रखा जाना चाहिए.

यह पृष्ठभूमि छवि की चौड़ाई लेता है, और यह इसके लिए थोड़ा मार्जिन छोड़ देता है (4%)। फिर शेष ऑपरेटर की मदद से, यह आकलन करता है कि यह किस कॉलम में रखा जाएगा (याद रखें, इसमें 4 कॉलम होंगे), और अंत में यह 1.1 गुणक का उपयोग करके प्रत्येक व्यक्ति के दरवाजे पर थोड़ा (10%) मार्जिन जोड़ता है.

उसी तरह, y संपत्ति का उपयोग किया जाएगा चोटी सीएसएस पोजिशनिंग प्रॉपर्टी, और इसी तरह यह उन पिक्सल्स में तय करता है, जहां एक इंडिविजुअल डोर को y- एक्सिस पर रखना पड़ता है.

हम पास की ऊंचाई की संपत्ति की मदद से पृष्ठभूमि की छवि की ऊंचाई लेते हैं कैलेंडर पैरामीटर (जो DOM-object रखता है), और कैलेंडर के ऊर्ध्वाधर पक्षों के चारों ओर 4% मार्जिन छोड़ते हैं.

फिर, Math.floor () पद्धति की सहायता से हम गणना करते हैं कि किसी दिए गए डोर ऑब्जेक्ट में कौन सी पंक्ति होगी (6 पंक्तियाँ होंगी).

अंत में हम 1.1 गुणक का उपयोग करके इसकी ऊँचाई को गुणा करके प्रत्येक डोर ऑब्जेक्ट के लिए 10% मार्जिन जोड़ते हैं.

 समारोह दरवाजा (कैलेंडर, दिन) this.width = ((Calendar.width - 0.1 * कैलेंडर.आवेशन) / 4) * 0.95; this.height = (Calendar.height - 0.1 * Calendar.height) / 6) * 0.95; this.adventMessage = Advent \ n \ n '+' "+ संदेश [दिन - 1] [0] +" + \ n \ t \ + '+' संदेशों द्वारा [+] - 1] [1] + '\ n \ n'; this.x = (0.04 * Calendar.width + ((दिन - 1)% 4) * (1.1 * this. उपलब्धता)); this.y = - (0.96 * Calendar.height - Math.floor ((दिन - 1) / 4) * (1.1 * this.height)); this.content = function () …; 

चरण 7 - आबाद करें “सामग्री()” तरीका

यह है सामग्री() विधि जो ब्राउज़र में हमारे दरवाजे प्रदर्शित करेगी। सबसे पहले, हम वैरिएबल की मदद से एक नया DOM नोड बनाते हैं नोड वह पैदा करेगा

 this.content = function () var नोड = document.createElement ("ली"); document.getElementById ( "adventDoors") appendChild (नोड)। नोड.ड = "दरवाजा" + दिन; 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 ("डोर" + डे) .appendChild (इनरनोड); innerNode.innerHTML = दिन; इनरनोड.हृद = "#"; अगर (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;   ;

 (फ़ंक्शन () var दरवाजे = []; के लिए (var i = 0; i; < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();