HTML, CSS మరియు JavaScript ఉపయోగించి డిజిటల్ గడియారాన్ని ఎలా సృష్టించాలి

HTML, CSS మరియు JavaScript ఉపయోగించి డిజిటల్ గడియారాన్ని ఎలా సృష్టించాలి

డిజిటల్ గడియారం జావాస్క్రిప్ట్‌లోని ఉత్తమ ప్రారంభ ప్రాజెక్టులలో ఒకటి. ఏదైనా నైపుణ్యం ఉన్న వ్యక్తుల కోసం నేర్చుకోవడం చాలా సులభం.





ఈ వ్యాసంలో, HTML, CSS మరియు JavaScript ఉపయోగించి మీ స్వంత డిజిటల్ గడియారాన్ని ఎలా నిర్మించాలో మీరు నేర్చుకుంటారు. వేరియబుల్స్ సృష్టించడం, ఫంక్షన్‌లను ఉపయోగించడం, తేదీలతో పనిచేయడం, DOM కి ప్రాపర్టీలు మరియు ప్రాపర్టీలను జోడించడం మరియు మరిన్ని వంటి వివిధ జావాస్క్రిప్ట్ భావనలతో మీరు అనుభవం పొందుతారు.



విండోస్ 10 స్పీకర్‌ల నుండి శబ్దం లేదు

ప్రారంభిద్దాం.





డిజిటల్ గడియారం యొక్క భాగాలు

డిజిటల్ గడియారం నాలుగు భాగాలను కలిగి ఉంది: గంట, నిమిషం, రెండవది మరియు మెరిడీమ్.

డిజిటల్ క్లాక్ ప్రాజెక్ట్ యొక్క ఫోల్డర్ నిర్మాణం

HTML, CSS మరియు JavaScript ఫైల్‌లను కలిగి ఉన్న రూట్ ఫోల్డర్‌ను సృష్టించండి. మీకు కావలసిన ఏదైనా ఫైల్‌లకు పేరు పెట్టవచ్చు. ఇక్కడ రూట్ ఫోల్డర్ పేరు పెట్టబడింది డిజిటల్-గడియారం . ప్రామాణిక నామకరణ సంప్రదాయం ప్రకారం, HTML, CSS మరియు జావాస్క్రిప్ట్ ఫైల్స్ పేరు పెట్టబడ్డాయి index.html , styles.css , మరియు స్క్రిప్ట్. js వరుసగా.



HTML ఉపయోగించి డిజిటల్ గడియారానికి నిర్మాణాన్ని జోడిస్తోంది

తెరవండి index.html కింది కోడ్‌ని ఫైల్ చేసి పేస్ట్ చేయండి:





Digital Clock Using JavaScript






ఇక్కడ, ఎ div తో సృష్టించబడింది id యొక్క డిజిటల్-గడియారం . జావాస్క్రిప్ట్ ఉపయోగించి డిజిటల్ గడియారాన్ని ప్రదర్శించడానికి ఈ డివి ఉపయోగించబడుతుంది. styles.css ఒక బాహ్య CSS పేజీ మరియు ఒక ఉపయోగించి HTML పేజీకి లింక్ చేయబడింది ట్యాగ్. అదేవిధంగా, స్క్రిప్ట్. js ఒక బాహ్య JS పేజీ మరియు దీనిని ఉపయోగించి HTML పేజీకి లింక్ చేయబడింది < స్క్రిప్ట్> ట్యాగ్.



జావాస్క్రిప్ట్ ఉపయోగించి డిజిటల్ గడియారానికి కార్యాచరణను జోడించడం

తెరవండి స్క్రిప్ట్. js కింది కోడ్‌ని ఫైల్ చేసి పేస్ట్ చేయండి:

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

ప్రస్తుత తేదీ మరియు సమయం ఇక్కడ నిల్వ చేయబడతాయి తేదీ వేరియబుల్. ఇప్పుడు మీరు తేదీ గంట నుండి ప్రస్తుత గంట, నిమిషం మరియు సెకను సేకరించాలి.

తేదీ.గంట గంటలు () , date.getMinutes (), మరియు తేదీ.గెట్ సెకన్లు () తేదీ వస్తువు నుండి వరుసగా ప్రస్తుత గంట, నిమిషం మరియు రెండవది పొందడానికి ఉపయోగిస్తారు. తదుపరి కార్యాచరణల కోసం అన్ని సమయ మూలకాలు ప్రత్యేక వేరియబుల్స్‌లో నిల్వ చేయబడతాయి.

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 కి టైమ్ ఎలిమెంట్‌లను జోడించడం

ముందుగా, DOM లక్ష్య డివైస్ ఐడిని ఉపయోగించి యాక్సెస్ చేయబడుతుంది ( డిజిటల్-గడియారం ). అప్పుడు టైమ్ ఎలిమెంట్స్‌ను ఉపయోగించి div కి కేటాయించబడతాయి అంతర్గత వచనం సెట్టర్.

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

పై CSS డిజిటల్ క్లాక్ స్టైల్ చేయడానికి ఉపయోగించబడుతుంది. ఇక్కడ, గడియారం యొక్క వచనాన్ని ప్రదర్శించడానికి ఓపెన్ సాన్స్ కండెన్స్డ్ ఫాంట్ ఉపయోగించబడుతుంది. ఇది ఉపయోగించి Google ఫాంట్‌ల నుండి దిగుమతి చేయబడింది @దిగుమతి . ది #డిజిటల్-గడియారం లక్ష్య ఎంపికను ఎంచుకోవడానికి id సెలెక్టర్ ఉపయోగించబడుతుంది. ఐడి సెలెక్టర్ దీనిని ఉపయోగిస్తుంది id ఒక నిర్దిష్ట మూలకాన్ని ఎంచుకోవడానికి ఒక HTML మూలకం యొక్క లక్షణం.

సంబంధిత: సాధారణ CSS కోడ్ ఉదాహరణలు మీరు 10 నిమిషాలలో నేర్చుకోవచ్చు

మీరు ఈ కథనంలో ఉపయోగించిన పూర్తి సోర్స్ కోడ్‌ని చూడాలనుకుంటే, ఇక్కడ ఉంది GitHub రిపోజిటరీ . అలాగే, మీరు ఈ ప్రాజెక్ట్ యొక్క లైవ్ వెర్షన్‌ని పరిశీలించాలనుకుంటే, మీరు దాన్ని తనిఖీ చేయవచ్చు GitHub పేజీలు .

గమనిక : ఈ వ్యాసంలో ఉపయోగించిన కోడ్ MIT లైసెన్స్ పొందింది .

ఇతర జావాస్క్రిప్ట్ ప్రాజెక్ట్‌లను అభివృద్ధి చేయండి

మీరు జావాస్క్రిప్ట్‌లో ఒక అనుభవశూన్యుడు మరియు మంచి వెబ్ డెవలపర్ కావాలనుకుంటే, మీరు కొన్ని మంచి జావాస్క్రిప్ట్ ఆధారిత ప్రాజెక్ట్‌లను నిర్మించాలి. వారు మీ రెజ్యూమెతో పాటు మీ కెరీర్‌కు విలువను జోడించగలరు.

మీరు కాలిక్యులేటర్, హ్యాంగ్‌మన్ గేమ్, టిక్ టాక్ టో, జావాస్క్రిప్ట్ వెదర్ యాప్, ఇంటరాక్టివ్ ల్యాండింగ్ పేజీ, వెయిట్ కన్వర్షన్ టూల్, రాక్ పేపర్ కత్తెర, వంటి కొన్ని ప్రాజెక్ట్‌లను ప్రయత్నించవచ్చు.

ఇన్‌స్టాగ్రామ్ చాట్ రంగును ఎలా మార్చాలి

మీరు మీ తదుపరి జావాస్క్రిప్ట్ ఆధారిత ప్రాజెక్ట్ కోసం చూస్తున్నట్లయితే, సాధారణ కాలిక్యులేటర్ అద్భుతమైన ఎంపిక.

షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ HTML, CSS మరియు JavaScript ఉపయోగించి సాధారణ కాలిక్యులేటర్‌ను ఎలా నిర్మించాలి

ప్రోగ్రామింగ్ చేసేటప్పుడు సరళమైన, లెక్కించిన కోడ్ మార్గం. HTML, CSS మరియు JS లలో మీ స్వంత కాలిక్యులేటర్‌ను ఎలా నిర్మించాలో చూడండి.

తదుపరి చదవండి సంబంధిత అంశాలు రచయిత గురుంచి యువరాజ్ చంద్ర(60 కథనాలు ప్రచురించబడ్డాయి)

యువరాజ్ భారతదేశంలోని ఢిల్లీ విశ్వవిద్యాలయంలో కంప్యూటర్ సైన్స్ అండర్ గ్రాడ్యుయేట్ విద్యార్థి. అతను పూర్తి స్టాక్ వెబ్ డెవలప్‌మెంట్ పట్ల మక్కువ కలిగి ఉన్నాడు. అతను వ్రాయనప్పుడు, అతను వివిధ సాంకేతికతల లోతును అన్వేషిస్తున్నాడు.

యువరాజ్ చంద్ర నుండి మరిన్ని

మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి