HTML, CSS और JavaScript का उपयोग करके डिजिटल घड़ी कैसे बनाएं

डिजिटल घड़ी जावास्क्रिप्ट में सबसे अच्छी शुरुआती परियोजनाओं में से एक है। किसी भी कौशल स्तर के लोगों के लिए सीखना काफी आसान है।

इस लेख में, आप सीखेंगे कि एचटीएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग करके अपनी खुद की डिजिटल घड़ी कैसे बनाई जाए। आपको विभिन्न जावास्क्रिप्ट अवधारणाओं के साथ व्यावहारिक अनुभव प्राप्त होगा जैसे कि चर बनाना, कार्यों का उपयोग करना, तिथियों के साथ काम करना, डीओएम में गुणों को एक्सेस करना और जोड़ना, और बहुत कुछ।

आएँ शुरू करें।

डिजिटल घड़ी के अवयव

डिजिटल घड़ी में चार भाग होते हैं: घंटा, मिनट, दूसरा और मध्याह्न।

डिजिटल घड़ी परियोजना की फ़ोल्डर संरचना

एक रूट फोल्डर बनाएं जिसमें HTML, CSS और JavaScript फाइलें हों। आप अपनी इच्छानुसार फाइलों को नाम दे सकते हैं। यहाँ रूट फोल्डर का नाम है डिजिटल घड़ी. मानक नामकरण परंपरा के अनुसार, HTML, CSS और JavaScript फ़ाइलों को नाम दिया गया है index.html, शैलियाँ.सीएसएस, तथा स्क्रिप्ट.जेएस क्रमशः।

HTML का उपयोग करके डिजिटल घड़ी में संरचना जोड़ना

को खोलो index.html फ़ाइल और निम्न कोड पेस्ट करें:

यहां एक डिव an. के साथ बनाया गया है ईद का डिजिटल घड़ी. इस डिव का उपयोग जावास्क्रिप्ट का उपयोग करके डिजिटल घड़ी को प्रदर्शित करने के लिए किया जाता है। शैलियाँ.सीएसएस एक बाहरी सीएसएस पेज है और एचटीएमएल पेज से जुड़ा हुआ है a टैग। इसी तरह, स्क्रिप्ट.जेएस एक बाहरी जेएस पेज है और एचटीएमएल पेज से जुड़ा हुआ है <स्क्रिप्ट> टैग।

जावास्क्रिप्ट का उपयोग करके डिजिटल घड़ी में कार्यक्षमता जोड़ना

को खोलो स्क्रिप्ट.जेएस फ़ाइल और निम्न कोड पेस्ट करें:

समारोह समय () {
// दिनांक वर्ग की वस्तु बनाना
वर तिथि = नई तिथि ();
// वर्तमान घंटे प्राप्त करें
वर घंटा = date.getHours ();
// वर्तमान मिनट प्राप्त करें
वर मिनट = date.getMinutes ();
// वर्तमान सेकंड प्राप्त करें
वर दूसरा = date.getSeconds ();
// AM / PM को स्टोर करने के लिए चर
वर अवधि = "";
// वर्तमान घंटे के अनुसार AM / PM असाइन करना
अगर (घंटा>= 12) {
अवधि = "पीएम";
} अन्य {
अवधि = "एएम";
}
// घंटे को 12 घंटे के प्रारूप में परिवर्तित करना
अगर (घंटा == 0) {
घंटा = 12;
} अन्य {
अगर (घंटा> 12) {
घंटा = घंटा - 12;
}
}
// घंटे, मिनट और सेकंड को अपडेट करना
// यदि वे 10. से कम हैं
घंटा = अद्यतन (घंटा);
मिनट = अद्यतन (मिनट);
दूसरा = अद्यतन (दूसरा);
// div में समय तत्वों को जोड़ना
document.getElementById("डिजिटल-घड़ी")। innerText = घंटा + ":" + मिनट + ":" + दूसरा + "" + अवधि;
// टाइमर को 1 सेकंड (1000 एमएस) पर सेट करें
सेटटाइमआउट (समय, 1000);
}
// समय तत्वों को अपडेट करने का कार्य यदि वे 10. से कम हैं
// समय से पहले के तत्वों को जोड़ें यदि वे 10 से कम हैं
फ़ंक्शन अपडेट (टी) {
अगर (टी <10) {
वापसी "0" + टी;
}
अन्य {
वापसी टी;
}
}
समय();

जावास्क्रिप्ट कोड को समझना

समय() तथा अपडेट करें() कार्यों का उपयोग डिजिटल घड़ी में कार्यक्षमता जोड़ने के लिए किया जाता है।

वर्तमान समय तत्व प्राप्त करना

वर्तमान दिनांक और समय प्राप्त करने के लिए, आपको दिनांक ऑब्जेक्ट बनाना होगा। जावास्क्रिप्ट में दिनांक वस्तु बनाने के लिए यह वाक्यविन्यास है:

वर तिथि = नई तिथि ();

वर्तमान दिनांक और समय में संग्रहीत किया जाएगा तारीख परिवर्तनशील। अब आपको दिनांक वस्तु से वर्तमान घंटा, मिनट और दूसरा निकालने की आवश्यकता है।

date.getHours (), date.getMinutes (), तथा date.getSeconds () दिनांक वस्तु से क्रमशः वर्तमान घंटा, मिनट और सेकंड प्राप्त करने के लिए उपयोग किया जाता है। सभी समय के तत्वों को आगे के संचालन के लिए अलग-अलग चर में संग्रहीत किया जाता है।

वर घंटा = date.getHours ();
वर मिनट = date.getMinutes ();
वर दूसरा = date.getSeconds ();

करंट मेरिडीम (AM/PM) असाइन करना

चूंकि डिजिटल घड़ी 12-घंटे के प्रारूप में है, इसलिए आपको वर्तमान घंटे के अनुसार उपयुक्त मध्याह्न रेखा निर्दिष्ट करने की आवश्यकता है। यदि वर्तमान घंटा 12 से अधिक या उसके बराबर है, तो मेरिडीम PM (पोस्ट मेरिडीम) है अन्यथा, यह AM (Ante Meridiem) है।

वर अवधि = "";
अगर (घंटा>= 12) {
अवधि = "पीएम";
} अन्य {
अवधि = "एएम";
}

वर्तमान घंटे को 12-घंटे के प्रारूप में परिवर्तित करना

अब आपको वर्तमान घंटे को 12 घंटे के प्रारूप में बदलने की जरूरत है। यदि वर्तमान घंटा 0 है, तो वर्तमान घंटे को 12 (12-घंटे के प्रारूप के अनुसार) में अपडेट किया जाता है। साथ ही, यदि वर्तमान घंटा 12 से अधिक है, तो इसे 12 घंटे के समय प्रारूप के साथ संरेखित रखने के लिए इसे 12 से घटा दिया जाता है।

सम्बंधित: वेब पेज पर टेक्स्ट चयन, कट, कॉपी, पेस्ट और राइट-क्लिक को अक्षम कैसे करें Right

अगर (घंटा == 0) {
घंटा = 12;
} अन्य {
अगर (घंटा> 12) {
घंटा = घंटा - 12;
}
}

समय तत्वों को अद्यतन करना

आपको समय तत्वों को अपडेट करने की आवश्यकता है यदि वे 10 (एकल-अंक) से कम हैं। 0 सभी सिंगल-डिजिट टाइम एलिमेंट्स (घंटे, मिनट, सेकेंड) में जोड़ा जाता है।

घंटा = अद्यतन (घंटा);
मिनट = अद्यतन (मिनट);
दूसरा = अद्यतन (दूसरा);
फ़ंक्शन अपडेट (टी) {
अगर (टी <10) {
वापसी "0" + टी;
}
अन्य {
वापसी टी;
}
}

DOM में Time Elements जोड़ना

सबसे पहले, DOM को लक्ष्य div की id का उपयोग करके एक्सेस किया जाता है (डिजिटल घड़ी). फिर समय तत्वों को का उपयोग करके div को सौंपा गया है आंतरिक पाठ सेटर

document.getElementById("डिजिटल-घड़ी")। innerText = घंटा + ":" + मिनट + ":" + दूसरा + "" + अवधि;

हर सेकेंड घड़ी को अपडेट करना

का उपयोग करके घड़ी को हर सेकेंड में अपडेट किया जाता है सेटटाइमआउट () जावास्क्रिप्ट में विधि।

सेटटाइमआउट (समय, 1000);

CSS का उपयोग करके डिजिटल घड़ी को स्टाइल करना

को खोलो शैलियाँ.सीएसएस फ़ाइल और निम्न कोड पेस्ट करें:

सम्बंधित: CSS बॉक्स-शैडो का उपयोग कैसे करें: ट्रिक्स और उदाहरण

/* ओपन सेन्स कंडेंस्ड गूगल फॉन्ट आयात करना */
@आयात यूआरएल (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght@300&display=swap');
#डिजिटल घड़ी {
पृष्ठभूमि-रंग: #66ffff;
चौड़ाई: 35%;
मार्जिन: ऑटो;
पैडिंग-टॉप: 50px;
पैडिंग-बॉटम: 50px;
फ़ॉन्ट-परिवार: 'ओपन सेन्स कंडेंस्ड', सेन्स-सेरिफ़;
फ़ॉन्ट-आकार: 64px;
पाठ-संरेखण: केंद्र;
बॉक्स-छाया: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);
}

उपरोक्त CSS का उपयोग डिजिटल घड़ी को स्टाइल करने के लिए किया जाता है। यहां, घड़ी के पाठ को प्रदर्शित करने के लिए ओपन सेन्स कंडेंस्ड फ़ॉन्ट का उपयोग किया जाता है। इसका उपयोग करके Google फोंट से आयात किया जाता है @आयात. #डिजिटल घड़ी आईडी चयनकर्ता का उपयोग लक्ष्य div का चयन करने के लिए किया जाता है। आईडी चयनकर्ता का उपयोग करता है ईद एक विशिष्ट तत्व का चयन करने के लिए एक HTML तत्व की विशेषता।

सम्बंधित: सरल सीएसएस कोड उदाहरण जो आप १० मिनट में सीख सकते हैं

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

ध्यान दें: इस लेख में प्रयुक्त कोड है एमआईटी लाइसेंस प्राप्त.

अन्य जावास्क्रिप्ट प्रोजेक्ट विकसित करें

यदि आप जावास्क्रिप्ट में एक नौसिखिया हैं और एक अच्छा वेब डेवलपर बनना चाहते हैं, तो आपको कुछ अच्छे जावास्क्रिप्ट-आधारित प्रोजेक्ट बनाने होंगे। वे आपके रेज़्यूमे के साथ-साथ आपके करियर में भी मूल्य जोड़ सकते हैं।

आप कैलकुलेटर, एक जल्लाद गेम, टिक टीएसी को पैर की अंगुली, एक जावास्क्रिप्ट मौसम ऐप, एक इंटरैक्टिव लैंडिंग पृष्ठ, एक वजन रूपांतरण उपकरण, रॉक पेपर कैंची, आदि जैसे कुछ प्रोजेक्ट आज़मा सकते हैं।

यदि आप अपने अगले जावास्क्रिप्ट-आधारित प्रोजेक्ट की तलाश कर रहे हैं, तो एक साधारण कैलकुलेटर एक उत्कृष्ट विकल्प है।

HTML, CSS और JavaScript का उपयोग करके एक साधारण कैलकुलेटर कैसे बनाएं

प्रोग्रामिंग करते समय सरल, परिकलित कोड जाने का तरीका है। HTML, CSS और JS में अपना कैलकुलेटर बनाने का तरीका देखें।

आगे पढ़िए

लेखक के बारे में