HTML, CSS மற்றும் JavaScript ஐப் பயன்படுத்தி ஒரு டிஜிட்டல் கடிகாரத்தை உருவாக்குவது எப்படி

HTML, CSS மற்றும் JavaScript ஐப் பயன்படுத்தி ஒரு டிஜிட்டல் கடிகாரத்தை உருவாக்குவது எப்படி

டிஜிட்டல் கடிகாரம் ஜாவாஸ்கிரிப்டில் சிறந்த தொடக்க திட்டங்களில் ஒன்றாகும். எந்த திறமை உள்ளவர்களுக்கும் கற்றுக்கொள்வது மிகவும் எளிது.





இந்த கட்டுரையில், HTML, CSS மற்றும் JavaScript ஐப் பயன்படுத்தி உங்கள் சொந்த டிஜிட்டல் கடிகாரத்தை எவ்வாறு உருவாக்குவது என்பதை நீங்கள் கற்றுக் கொள்வீர்கள். மாறிகளை உருவாக்குதல், செயல்பாடுகளைப் பயன்படுத்துவது, தேதிகளுடன் வேலை செய்தல், DOM க்கு பண்புகளை அணுகுவது மற்றும் சேர்ப்பது போன்ற பல ஜாவாஸ்கிரிப்ட் கருத்துகளுடன் நீங்கள் அனுபவத்தைப் பெறுவீர்கள்.



ஒரு பாடல் மென்பொருளின் திறவுகோலை எப்படி கண்டுபிடிப்பது

ஆரம்பிக்கலாம்.





டிஜிட்டல் கடிகாரத்தின் கூறுகள்

டிஜிட்டல் கடிகாரத்தில் நான்கு பகுதிகள் உள்ளன: மணிநேரம், நிமிடம், இரண்டாவது மற்றும் மெரிடியம்.

டிஜிட்டல் கடிகார திட்டத்தின் கோப்புறை அமைப்பு

HTML, CSS மற்றும் JavaScript கோப்புகளைக் கொண்ட ஒரு ரூட் கோப்புறையை உருவாக்கவும். நீங்கள் விரும்பும் எதையும் கோப்புகளுக்கு பெயரிடலாம். இங்கே ரூட் கோப்புறை பெயரிடப்பட்டுள்ளது டிஜிட்டல்-கடிகாரம் . நிலையான பெயரிடும் மாநாட்டின் படி, HTML, CSS மற்றும் JavaScript கோப்புகள் பெயரிடப்பட்டுள்ளன index.html , styles.css , மற்றும் ஸ்கிரிப்ட்.ஜெஸ் முறையே.



HTML ஐப் பயன்படுத்தி டிஜிட்டல் கடிகாரத்தில் கட்டமைப்பைச் சேர்க்கிறது

திற index.html பின்வரும் குறியீட்டை கோப்பு மற்றும் ஒட்டவும்:





Digital Clock Using JavaScript






இங்கே, ஏ div உடன் உருவாக்கப்பட்டது ஐடி இன் டிஜிட்டல்-கடிகாரம் . ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி டிஜிட்டல் கடிகாரத்தைக் காட்ட இந்த டிவி பயன்படுத்தப்படுகிறது. styles.css ஒரு வெளிப்புற CSS பக்கம் மற்றும் a ஐப் பயன்படுத்தி HTML பக்கத்துடன் இணைக்கப்பட்டுள்ளது குறிச்சொல். இதேபோல், ஸ்கிரிப்ட்.ஜெஸ் ஒரு வெளிப்புற JS பக்கம் மற்றும் HTML பக்கத்துடன் இணைக்கப்பட்டுள்ளது < ஸ்கிரிப்ட்> குறிச்சொல்.



ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி டிஜிட்டல் கடிகாரத்தில் செயல்பாட்டைச் சேர்க்கிறது

திற ஸ்கிரிப்ட்.ஜெஸ் பின்வரும் குறியீட்டை கோப்பு மற்றும் ஒட்டவும்:

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();

ஜாவாஸ்கிரிப்ட் குறியீட்டை புரிந்துகொள்வது

தி நேரம்() மற்றும் மேம்படுத்தல் () டிஜிட்டல் கடிகாரத்தில் செயல்பாட்டைச் சேர்க்க செயல்பாடுகள் பயன்படுத்தப்படுகின்றன.



தற்போதைய நேர கூறுகளைப் பெறுதல்

தற்போதைய தேதி மற்றும் நேரத்தைப் பெற, நீங்கள் ஒரு தேதி பொருளை உருவாக்க வேண்டும். ஜாவாஸ்கிரிப்டில் ஒரு தேதி பொருளை உருவாக்குவதற்கான தொடரியல் இது:

var date = new Date();

தற்போதைய தேதி மற்றும் நேரம் இதில் சேமிக்கப்படும் தேதி மாறி. இப்போது தேதி நேரத்திலிருந்து தற்போதைய மணிநேரம், நிமிடம் மற்றும் வினாடியைப் பிரித்தெடுக்க வேண்டும்.

தேதி.நேர நேரம் () , தேதி.ஜெட் நிமிடங்கள் (), மற்றும் தேதி.கெட் விநாடிகள் () தேதி நேரத்திலிருந்து முறையே தற்போதைய மணிநேரம், நிமிடம் மற்றும் இரண்டாவது பெறப் பயன்படுகிறது. மேலும் செயல்பாடுகளுக்கு அனைத்து நேர உறுப்புகளும் தனி மாறிகளில் சேமிக்கப்படும்.

var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

தற்போதைய மதியத்தை ஒதுக்குதல் (AM/PM)

டிஜிட்டல் கடிகாரம் 12 மணி நேர வடிவத்தில் இருப்பதால், தற்போதைய நேரத்திற்கு ஏற்ப நீங்கள் பொருத்தமான மெரிடியம் ஒதுக்க வேண்டும். தற்போதைய நேரம் 12 ஐ விட அதிகமாகவோ அல்லது சமமாகவோ இருந்தால், மெரிடியம் பிஎம் (போஸ்ட் மெரிடியம்) இல்லையென்றால், அது ஏஎம் (ஆன்டி மெரிடியம்).

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 இல் நேர உறுப்புகளைச் சேர்த்தல்

முதலில், DOM ஐ இலக்கு டிவி ஐடியைப் பயன்படுத்தி அணுகலாம் ( டிஜிட்டல்-கடிகாரம் ) பின்னர் நேர கூறுகள் திவைப் பயன்படுத்தி வகுப்பிற்கு ஒதுக்கப்படும் உள் உரை அமைப்பான்.

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

ஒவ்வொரு நொடியும் கடிகாரத்தைப் புதுப்பித்தல்

கடிகாரம் ஒவ்வொரு நொடியும் புதுப்பிக்கப்படுகிறது setTimeout () ஜாவாஸ்கிரிப்டில் முறை.

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);
}

மேலே உள்ள சிஎஸ்எஸ் டிஜிட்டல் கடிகாரத்தை வடிவமைக்கப் பயன்படுகிறது. இங்கே, திறந்த சான்ஸ் குவிக்கப்பட்ட எழுத்துரு கடிகாரத்தின் உரையைக் காண்பிக்கப் பயன்படுகிறது. இது பயன்படுத்தி Google எழுத்துருக்களிலிருந்து இறக்குமதி செய்யப்படுகிறது @இறக்குமதி . தி #டிஜிட்டல் கடிகாரம் இலக்கு வகுப்பைத் தேர்ந்தெடுக்க ஐடி தேர்வி பயன்படுத்தப்படுகிறது. ஐடி தேர்வாளர் இதைப் பயன்படுத்துகிறார் ஐடி ஒரு குறிப்பிட்ட உறுப்பைத் தேர்ந்தெடுக்க ஒரு HTML உறுப்பின் பண்பு.

தொடர்புடையது: எளிய CSS குறியீடு உதாரணங்கள் நீங்கள் 10 நிமிடங்களில் கற்றுக்கொள்ளலாம்

இந்த கட்டுரையில் பயன்படுத்தப்படும் முழுமையான மூலக் குறியீட்டைப் பார்க்க விரும்பினால், இதோ கிட்ஹப் களஞ்சியம் . மேலும், இந்த திட்டத்தின் நேரடி பதிப்பை நீங்கள் பார்க்க விரும்பினால், அதை நீங்கள் பார்க்கலாம் கிட்ஹப் பக்கங்கள் .

குறிப்பு : இந்தக் கட்டுரையில் பயன்படுத்தப்படும் குறியீடு எம்ஐடி உரிமம் பெற்றது .

பிற ஜாவாஸ்கிரிப்ட் திட்டங்களை உருவாக்குங்கள்

நீங்கள் ஜாவாஸ்கிரிப்டில் ஒரு தொடக்க மற்றும் நல்ல வலை உருவாக்குநராக இருக்க விரும்பினால், நீங்கள் சில நல்ல ஜாவாஸ்கிரிப்ட் அடிப்படையிலான திட்டங்களை உருவாக்க வேண்டும். அவர்கள் உங்கள் விண்ணப்பம் மற்றும் உங்கள் வாழ்க்கைக்கு மதிப்பு சேர்க்கலாம்.

கால்குலேட்டர், ஹேங்மேன் கேம், டிக் டாக் டோ, ஜாவாஸ்கிரிப்ட் வானிலை பயன்பாடு, ஊடாடும் தரையிறங்கும் பக்கம், எடை மாற்ற கருவி, ராக் பேப்பர் கத்தரிக்கோல் போன்ற சில திட்டங்களை நீங்கள் முயற்சி செய்யலாம்.

நீக்கப்பட்ட மெசஞ்சர் செய்திகளை எவ்வாறு மீட்டெடுப்பது

உங்கள் அடுத்த ஜாவாஸ்கிரிப்ட் அடிப்படையிலான திட்டத்தை நீங்கள் தேடுகிறீர்களானால், ஒரு எளிய கால்குலேட்டர் ஒரு சிறந்த தேர்வாகும்.

பகிர் பகிர் ட்வீட் மின்னஞ்சல் HTML, CSS மற்றும் JavaScript ஐ பயன்படுத்தி எளிய கால்குலேட்டரை உருவாக்குவது எப்படி

எளிய, கணக்கிடப்பட்ட குறியீடு நிரலாக்கத்தின் போது செல்ல வழி. HTML, CSS மற்றும் JS இல் உங்கள் சொந்த கால்குலேட்டரை எவ்வாறு உருவாக்குவது என்று பாருங்கள்.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள் எழுத்தாளர் பற்றி யுவராஜ் சந்திரா(60 கட்டுரைகள் வெளியிடப்பட்டன)

யுவராஜ் இந்தியாவின் டெல்லி பல்கலைக்கழகத்தில் கணினி அறிவியல் இளங்கலை மாணவர். அவர் முழு ஸ்டாக் வலை மேம்பாட்டில் ஆர்வம் கொண்டவர். அவர் எழுதாதபோது, ​​அவர் பல்வேறு தொழில்நுட்பங்களின் ஆழத்தை ஆராய்கிறார்.

யுவராஜ் சந்திராவின் மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்