پیشرفت کی سلاخوں کو ایک کام کے دوران ایک فیصد تک کچھ اہم سنگ میل طے کرنے کے لئے استعمال کیا جاتا ہے۔ آپ میں ایک پروگریس بار تشکیل دے سکتے ہیں جو کسی کام کی تکمیل پیشرفت کو واضح کرتا ہے۔ پروگریس بار کی قدر جاوا اسکرپٹ کے ذریعہ استعمال کی جاسکتی ہے۔ اس مضمون میں ، ہم دیکھیں گے کہ آپ مندرجہ ذیل ترتیب میں ایچ ٹی ایم ایل ، سی ایس ایس ، اور جاوا اسکرپٹ کی مدد سے کس طرح ایک پروگریس بار تشکیل دے سکتے ہیں:
چلو شروع کریں.
c ++ اور جاوا کے مابین فرق
HTML میں پروگریس بار کیسے بنائیں؟
ایک پروگریس بار میں کسی بھی کام کی پیشرفت کو دکھایا گیا ہے جو کیا جارہا ہے۔ عام طور پر ، ان سلاخوں کو ڈاؤن لوڈ اور اپ لوڈ کی حیثیت ظاہر کرنے کے لئے استعمال کیا جاتا ہے۔ ہم کہہ سکتے ہیں کہ ترقی کی باروں کو کسی بھی ایسی صورتحال کی عکاسی کرنے کے لئے استعمال کیا جاسکتا ہے جو جاری ہے۔
استعمال کرتے ہوئے ایک بنیادی پروگریس بار تشکیل دینا ، مندرجہ ذیل اقدامات کرنے کی ضرورت ہے۔
- اپنی پیشرفت بار کے لئے HTML ڈھانچہ تشکیل دیں۔ HTML ٹیگ کسی کام کی تکمیل پیشرفت کی وضاحت کرتا ہے۔
- سی ایس ایس کو شامل کرنا - اگلا مرحلہ اس کی مدد سے بار میں پیش رفت کی حیثیت کے ساتھ ساتھ بار میں پیشرفت کی حیثیت شامل کرنا ہے سی ایس ایس .
# پروگریس_ٹیٹوس {چوڑائی: 50٪ پس منظر کا رنگ: #ddd} #myprogressBar {چوڑائی: 1٪ اونچائی: 35px پس منظر کا رنگ: # 4CAF50 ٹیکسٹ سیدھ کریں: سنٹر لائن اونچائی: 32px رنگ: سیاہ}- جاوا اسکرپٹ کو شامل کرنا - اگلا مرحلہ استعمال کرتے ہوئے متحرک متحرک پروجس بار بنانا ہے جاوا اسکرپٹ کام کرتا ہے اپ ڈیٹ اور منظر .
فنکشن اپ ڈیٹ () {var عنصر = دستاویز.getElementById ('myprogressBar') var چوڑائی = 1 var شناخت = setInterval (منظر ، 10) فنکشن سین () {اگر (چوڑائی> = 100) {ClearInterval (شناخت)} دوسری + چوڑائی ++ عنصر.سٹائل.واڈتھ = چوڑائی + '٪'}}}اب جب کہ آپ کو پروگریس بار بنانے کے مختلف مراحل معلوم ہیں ، آئیے آگے بڑھیں اور ایک پروگریس بار کی مکمل مثال دیکھیں۔
پروگریس بار: مثال
ایک بار جب آپ پروگریس بار بنانے کے ل different مختلف مراحل مکمل کرلیتے ہیں تو ، HTML ، CSS اور. سے لنک کرنے کا وقت آگیا ہے جاوا اسکرپٹ عناصر . مندرجہ ذیل مثال مندرجہ بالا کو جوڑتے ہوئے پیشرفت بار کے مکمل کوڈ کو ظاہر کرتی ہے ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کوڈز:
# پروگریس_ٹیٹوس {چوڑائی: 50٪ پس منظر کا رنگ: #ddd} #myprogressBar {چوڑائی: 2٪ اونچائی: 20px پس منظر کا رنگ: # 4CAF50}جاوا اسکرپٹ کا استعمال کرتے ہوئے پروگریس بار کی مثال
کسی فائل کی حیثیت ڈاؤن لوڈ کریں:
ڈاؤن لوڈ شروع کریں فنکشن اپ ڈیٹ () element var عنصر = دستاویز.getElementById ('myprogressBar') var چوڑائی = 1 var شناخت = setInterval (منظر ، 10) فنکشن منظر () {اگر (چوڑائی> = 100) {ClearInterval (شناخت)} ورنہ {چوڑائی ++ عنصر.سٹائل.واڈتھ = چوڑائی + '٪'}}آؤٹ پٹ:
اس کے ساتھ ، ہم اپنے مضمون کے آخر میں پہنچ گئے ہیں۔ مجھے امید ہے کہ آپ نے پروگریس بار بنانے کے لئے درکار مختلف مراحل کو سمجھا ہوگا۔
ہمارے چیک کریں جو انسٹرکٹر کی زیر قیادت براہ راست تربیت اور حقیقی زندگی کے منصوبے کے تجربے کے ساتھ آتا ہے۔ یہ تربیت آپ کو بیک اینڈ اور فرنٹ اینڈ ویب ٹیکنالوجیز کے ساتھ کام کرنے کی مہارت میں مہارت حاصل کرتی ہے۔ اس میں ویب ڈویلپمنٹ ، jQuery ، انجولر ، نوڈ جے ایس ، ایکسپریس جے ایس ، اور مونگو ڈی بی کی تربیت شامل ہے۔
ہمارے لئے ایک سوال ہے؟ برائے کرم اس بلاگ کے تبصرے والے حصے میں اس کا تذکرہ کریں اور ہم آپ کو واپس ملیں گے۔