ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا استعمال کرتے ہوئے ڈیجیٹل گھڑی کیسے بنائی جائے۔

ڈیجیٹل گھڑی جاوا اسکرپٹ کے بہترین ابتدائی منصوبوں میں شامل ہے۔ کسی بھی مہارت کی سطح کے لوگوں کے لیے یہ سیکھنا بہت آسان ہے۔

اس آرٹیکل میں ، آپ سیکھیں گے کہ ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا استعمال کرتے ہوئے اپنی ڈیجیٹل گھڑی کیسے بنائی جائے۔ آپ مختلف جاوا اسکرپٹ تصورات کے ساتھ تجربہ حاصل کریں گے جیسے متغیرات بنانا ، افعال استعمال کرنا ، تاریخوں کے ساتھ کام کرنا ، DOM میں پراپرٹیز تک رسائی اور شامل کرنا ، اور بہت کچھ۔

سٹاپ کوڈ سسٹم سروس رعایت ونڈوز 10۔

آو شروع کریں.

ڈیجیٹل گھڑی کے اجزاء

ڈیجیٹل گھڑی کے چار حصے ہوتے ہیں: گھنٹہ ، منٹ ، دوسرا ، اور میریڈیئم۔

ڈیجیٹل کلاک پروجیکٹ کا فولڈر ڈھانچہ۔

ایک روٹ فولڈر بنائیں جس میں HTML ، CSS اور جاوا اسکرپٹ فائلیں ہوں۔ آپ فائلوں کو کسی بھی چیز کا نام دے سکتے ہیں۔ یہاں روٹ فولڈر کا نام ہے۔ ڈیجیٹل گھڑی۔ . معیاری نام کنونشن کے مطابق ، HTML ، CSS ، اور جاوا اسکرپٹ فائلوں کے نام ہیں۔ index.html ، styles.css ، اور script.js بالترتیب

ایچ ٹی ایم ایل کا استعمال کرتے ہوئے ڈیجیٹل گھڑی میں ڈھانچہ شامل کرنا۔

کھولو index.html درج ذیل کوڈ کو فائل اور پیسٹ کریں:

  
  
  
  
 Digital Clock Using JavaScript

یہاں ، ایک div ایک کے ساتھ بنایا گیا ہے۔ آئی ڈی کی ڈیجیٹل گھڑی . یہ div جاوا اسکرپٹ کا استعمال کرتے ہوئے ڈیجیٹل گھڑی دکھانے کے لیے استعمال ہوتا ہے۔ styles.css ایک بیرونی سی ایس ایس پیج ہے اور ایچ ٹی ایم ایل پیج سے منسلک ہے۔ ٹیگ. اسی طرح ، script.js ایک بیرونی جے ایس پیج ہے اور ایچ ٹی ایم ایل پیج سے منسلک ہے۔ < اسکرپٹ> ٹیگ.

جاوا اسکرپٹ کا استعمال کرتے ہوئے ڈیجیٹل گھڑی میں فعالیت شامل کرنا۔

کھولو script.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.getHours () ، date.getMinutes () ، اور date.getSeconds () تاریخ آبجیکٹ سے بالترتیب موجودہ گھنٹہ ، منٹ اور دوسرا حاصل کرنے کے لیے استعمال ہوتے ہیں۔ مزید کاموں کے لیے تمام وقتی عناصر الگ الگ متغیرات میں محفوظ ہیں۔

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 کی id ( ڈیجیٹل گھڑی ). پھر وقت کے عناصر کو div کا استعمال کرتے ہوئے تفویض کیا جاتا ہے۔ اندرونی متن سیٹر

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

ہر سیکنڈ میں گھڑی کو اپ ڈیٹ کرنا۔

گھڑی کو ہر سیکنڈ کو استعمال کرتے ہوئے اپ ڈیٹ کیا جاتا ہے۔ سیٹ ٹائم آؤٹ () جاوا اسکرپٹ میں طریقہ

setTimeout(Time, 1000);

سی ایس ایس کا استعمال کرتے ہوئے ڈیجیٹل گھڑی کو اسٹائل کرنا۔

کھولو styles.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);  
}

مذکورہ سی ایس ایس ڈیجیٹل گھڑی کو سٹائل کرنے کے لیے استعمال کیا جاتا ہے۔ یہاں ، اوپن سانس کنڈینسڈ فونٹ گھڑی کے متن کو ظاہر کرنے کے لیے استعمال ہوتا ہے۔ یہ استعمال کرتے ہوئے گوگل فونٹس سے درآمد کیا گیا ہے۔ port امپورٹ . کی #ڈیجیٹل گھڑی id سلیکٹر ہدف div کو منتخب کرنے کے لیے استعمال کیا جاتا ہے۔ آئی ڈی سلیکٹر استعمال کرتا ہے۔ آئی ڈی کسی خاص عنصر کو منتخب کرنے کے لیے HTML عنصر کی صفت۔

اگر آپ اس آرٹیکل میں استعمال ہونے والے مکمل سورس کوڈ پر ایک نظر ڈالنا چاہتے ہیں تو یہ ہے۔ گٹ ہب ذخیرہ۔ . نیز ، اگر آپ اس پروجیکٹ کے براہ راست ورژن پر ایک نظر ڈالنا چاہتے ہیں تو آپ اسے چیک کر سکتے ہیں۔ گٹ ہب صفحات۔ .

نوٹ : اس مضمون میں استعمال شدہ کوڈ ہے۔ ایم آئی ٹی لائسنس یافتہ .

دیگر جاوا اسکرپٹ پروجیکٹس تیار کریں۔

اگر آپ جاوا اسکرپٹ میں ابتدائی ہیں اور ایک اچھا ویب ڈویلپر بننا چاہتے ہیں تو آپ کو جاوا اسکرپٹ پر مبنی کچھ اچھے منصوبے بنانے کی ضرورت ہے۔ وہ آپ کے ریزیومے کے ساتھ ساتھ آپ کے کیریئر کی قدر میں اضافہ کر سکتے ہیں۔

آپ کچھ پروجیکٹس جیسے کیلکولیٹر ، ہینگ مین گیم ، ٹک ٹیک ٹو ، جاوا اسکرپٹ ویدر ایپ ، انٹرایکٹو لینڈنگ پیج ، ویٹ کنورژن ٹول ، راک پیپر کینچی وغیرہ آزما سکتے ہیں۔

اپنے ڈیسک ٹاپ ونڈوز 10 کو کیسے منظم کریں۔

اگر آپ اپنے اگلے جاوا اسکرپٹ پر مبنی منصوبے کی تلاش کر رہے ہیں تو ، ایک سادہ کیلکولیٹر ایک بہترین انتخاب ہے۔

بانٹیں بانٹیں ٹویٹ ای میل۔ ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا استعمال کرتے ہوئے ایک سادہ کیلکولیٹر کیسے بنایا جائے۔

پروگرامنگ کرتے وقت سادہ ، حساب شدہ کوڈ جانے کا راستہ ہے۔ ایچ ٹی ایم ایل ، سی ایس ایس اور جے ایس میں اپنا کیلکولیٹر بنانے کا طریقہ چیک کریں۔

اگلا پڑھیں۔ متعلقہ موضوعات۔

ورڈپریس اور ویب ڈویلپمنٹ۔
پروگرامنگ۔
ایچ ٹی ایم ایل
ویب سازی
جاوا اسکرپٹ۔
سی ایس ایس

مصنف کے بارے میں یوراج چندر۔(60 مضامین شائع ہوئے)

یوراج دہلی یونیورسٹی ، انڈیا میں کمپیوٹر سائنس کے انڈر گریجویٹ طالب علم ہیں۔ وہ فل اسٹیک ویب ڈویلپمنٹ کے بارے میں پرجوش ہے۔ جب وہ نہیں لکھ رہا ہے ، وہ مختلف ٹیکنالوجیز کی گہرائی کو تلاش کر رہا ہے۔

یوراج چندر سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔