Home-theater-designers
डिजिटल घड़ी जावास्क्रिप्ट में सबसे अच्छी शुरुआती परियोजनाओं में से एक है। किसी भी कौशल स्तर के लोगों के लिए सीखना काफी आसान है।
इस लेख में, आप सीखेंगे कि एचटीएमएल, सीएसएस और जावास्क्रिप्ट का उपयोग करके अपनी खुद की डिजिटल घड़ी कैसे बनाई जाए। आपको विभिन्न जावास्क्रिप्ट अवधारणाओं के साथ व्यावहारिक अनुभव प्राप्त होगा जैसे कि चर बनाना, कार्यों का उपयोग करना, तिथियों के साथ काम करना, डीओएम में गुणों को एक्सेस करना और जोड़ना, और बहुत कुछ।
जीपीयू ट्वीक का उपयोग कैसे करें 2
आएँ शुरू करें।
डिजिटल घड़ी के अवयव
डिजिटल घड़ी में चार भाग होते हैं: घंटा, मिनट, दूसरा और मध्याह्न।
डिजिटल घड़ी परियोजना की फ़ोल्डर संरचना
एक रूट फोल्डर बनाएं जिसमें HTML, CSS और JavaScript फाइलें हों। आप अपनी इच्छानुसार फाइलों को नाम दे सकते हैं। यहाँ रूट फोल्डर का नाम है डिजिटल घड़ी . मानक नामकरण परंपरा के अनुसार, HTML, CSS और JavaScript फ़ाइलों को नाम दिया गया है index.html , Styles.css , तथा स्क्रिप्ट.जेएस क्रमश।
HTML का उपयोग करके डिजिटल घड़ी में संरचना जोड़ना
को खोलो index.html फ़ाइल और निम्न कोड पेस्ट करें:
Digital Clock Using JavaScript
यहाँ एक डिव an . के साथ बनाया गया है पहचान का डिजिटल घड़ी . इस डिव का उपयोग जावास्क्रिप्ट का उपयोग करके डिजिटल घड़ी को प्रदर्शित करने के लिए किया जाता है। Styles.css एक बाहरी सीएसएस पेज है और एचटीएमएल पेज से जुड़ा हुआ है a उपनाम। इसी तरह, स्क्रिप्ट.जेएस एक बाहरी जेएस पेज है और एचटीएमएल पेज से जुड़ा हुआ है < स्क्रिप्ट> उपनाम।
जावास्क्रिप्ट का उपयोग करके डिजिटल घड़ी में कार्यक्षमता जोड़ना
को खोलो स्क्रिप्ट.जेएस फ़ाइल और निम्न कोड पेस्ट करें:
function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = '';
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}
Time();जावास्क्रिप्ट कोड को समझना
NS समय() तथा अपडेट करें() कार्यों का उपयोग डिजिटल घड़ी में कार्यक्षमता जोड़ने के लिए किया जाता है।
वर्तमान समय तत्व प्राप्त करना
वर्तमान दिनांक और समय प्राप्त करने के लिए, आपको दिनांक ऑब्जेक्ट बनाना होगा। जावास्क्रिप्ट में दिनांक वस्तु बनाने के लिए यह वाक्यविन्यास है:
var date = new Date();वर्तमान दिनांक और समय में संग्रहीत किया जाएगा दिनांक चर। अब आपको दिनांक वस्तु से वर्तमान घंटा, मिनट और दूसरा निकालने की आवश्यकता है।
date.getHours () , date.getMinutes (), तथा date.getसेकंड () दिनांक वस्तु से क्रमशः वर्तमान घंटा, मिनट और सेकंड प्राप्त करने के लिए उपयोग किया जाता है। सभी समय के तत्वों को आगे के संचालन के लिए अलग-अलग चर में संग्रहीत किया जाता है।
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();वर्तमान दोपहर असाइन करना (AM/PM)
चूंकि डिजिटल घड़ी 12-घंटे के प्रारूप में है, इसलिए आपको वर्तमान घंटे के अनुसार उपयुक्त मध्याह्न रेखा निर्दिष्ट करने की आवश्यकता है। यदि वर्तमान घंटा 12 से अधिक या उसके बराबर है, तो मेरिडीम PM (पोस्ट मेरिडीम) है अन्यथा, यह AM (Ante Meridiem) है।
var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}वर्तमान घंटे को 12-घंटे के प्रारूप में परिवर्तित करना
अब आपको वर्तमान घंटे को 12 घंटे के प्रारूप में बदलने की जरूरत है। यदि वर्तमान घंटा 0 है, तो वर्तमान घंटे को 12 (12-घंटे के प्रारूप के अनुसार) में अपडेट किया जाता है। साथ ही, यदि वर्तमान घंटा 12 से अधिक है, तो इसे 12 घंटे के समय प्रारूप के साथ संरेखित रखने के लिए इसे 12 से घटा दिया जाता है।
सम्बंधित: टेक्स्ट सिलेक्शन को डिसेबल कैसे करें, कट, कॉपी, पेस्ट और वेब पेज पर राइट-क्लिक करें
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}समय तत्वों को अद्यतन करना
आपको समय तत्वों को अपडेट करने की आवश्यकता है यदि वे 10 (एकल-अंक) से कम हैं। 0 सभी एकल-अंकों के समय तत्वों (घंटा, मिनट, सेकंड) में जोड़ा जाता है।
hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}DOM में Time Elements जोड़ना
सबसे पहले, DOM को लक्ष्य div की id का उपयोग करके एक्सेस किया जाता है ( डिजिटल घड़ी ) फिर समय तत्वों को का उपयोग करके div को सौंपा गया है आंतरिक पाठ सेटर
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;हर सेकेंड घड़ी को अपडेट करना
का उपयोग करके घड़ी को हर सेकेंड में अपडेट किया जाता है सेटटाइमआउट () जावास्क्रिप्ट में विधि।
setTimeout(Time, 1000);CSS का उपयोग करके डिजिटल घड़ी को स्टाइल करना
को खोलो Styles.css फ़ाइल और निम्न कोड पेस्ट करें:
सम्बंधित: CSS बॉक्स-शैडो का उपयोग कैसे करें: ट्रिक्स और उदाहरण
/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');
#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}उपरोक्त CSS का उपयोग डिजिटल घड़ी को स्टाइल करने के लिए किया जाता है। यहां, घड़ी के पाठ को प्रदर्शित करने के लिए ओपन सेन्स कंडेंस्ड फ़ॉन्ट का उपयोग किया जाता है। इसका उपयोग करके Google फोंट से आयात किया जाता है @आयात . NS #डिजिटल घड़ी आईडी चयनकर्ता का उपयोग लक्ष्य div का चयन करने के लिए किया जाता है। आईडी चयनकर्ता का उपयोग करता है पहचान एक विशिष्ट तत्व का चयन करने के लिए एक HTML तत्व की विशेषता।
सम्बंधित: सरल सीएसएस कोड उदाहरण जो आप १० मिनट में सीख सकते हैं
यदि आप इस लेख में उपयोग किए गए संपूर्ण स्रोत कोड को देखना चाहते हैं, तो यह है गिटहब भंडार . इसके अलावा, यदि आप इस परियोजना के लाइव संस्करण को देखना चाहते हैं, तो आप इसे देख सकते हैं गिटहब पेज .
ध्यान दें : इस लेख में प्रयुक्त कोड है एमआईटी लाइसेंस प्राप्त .
अन्य जावास्क्रिप्ट प्रोजेक्ट विकसित करें
यदि आप जावास्क्रिप्ट में एक नौसिखिया हैं और एक अच्छा वेब डेवलपर बनना चाहते हैं, तो आपको कुछ अच्छे जावास्क्रिप्ट-आधारित प्रोजेक्ट बनाने होंगे। वे आपके रेज़्यूमे के साथ-साथ आपके करियर में भी मूल्य जोड़ सकते हैं।
आप कैलकुलेटर, एक जल्लाद गेम, टिक टीएसी को पैर की अंगुली, एक जावास्क्रिप्ट मौसम ऐप, एक इंटरैक्टिव लैंडिंग पृष्ठ, एक वजन रूपांतरण उपकरण, रॉक पेपर कैंची, आदि जैसे कुछ प्रोजेक्ट आज़मा सकते हैं।
Google डॉक्स में टेक्स्ट बॉक्स जोड़ें
यदि आप अपने अगले जावास्क्रिप्ट-आधारित प्रोजेक्ट की तलाश कर रहे हैं, तो एक साधारण कैलकुलेटर एक उत्कृष्ट विकल्प है।
साझा करना साझा करना कलरव ईमेल HTML, CSS और JavaScript का उपयोग करके एक साधारण कैलकुलेटर कैसे बनाएंप्रोग्रामिंग करते समय सरल, परिकलित कोड जाने का तरीका है। HTML, CSS और JS में अपना कैलकुलेटर बनाने का तरीका देखें।
आगे पढ़िए संबंधित विषय- वर्डप्रेस और वेब डेवलपमेंट
- प्रोग्रामिंग
- एचटीएमएल
- वेब विकास
- जावास्क्रिप्ट
- सीएसएस
युवराज दिल्ली विश्वविद्यालय, भारत में कंप्यूटर विज्ञान के स्नातक छात्र हैं। उन्हें फुल स्टैक वेब डेवलपमेंट का शौक है। जब वह नहीं लिख रहा होता है, तो वह विभिन्न तकनीकों की गहराई की खोज कर रहा होता है।
युवराज चंद्र की अन्य फ़िल्में-टीवी शोहमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें