HTML இல் முன்னேற்றப் பட்டியை உருவாக்குவது எப்படி?

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

• HTML இல் முன்னேற்றப் பட்டியை உருவாக்குவது எப்படி?
• முன்னேற்றப் பட்டி: எடுத்துக்காட்டு

ஆரம்பித்துவிடுவோம்.

HTML இல் முன்னேற்றப் பட்டியை உருவாக்குவது எப்படி?

ஒரு முன்னேற்றப் பட்டியில் மேற்கொள்ளப்படும் எந்தவொரு பணியின் முன்னேற்றத்தையும் சித்தரிக்கிறது. பொதுவாக, பதிவிறக்கம் மற்றும் பதிவேற்ற நிலையைக் காட்ட இந்த பார்கள் பயன்படுத்தப்படுகின்றன. முன்னேற்றத்தில் உள்ள எந்தவொரு நிலையையும் சித்தரிக்க முன்னேற்றப் பட்டிகளைப் பயன்படுத்தலாம் என்று நாம் கூறலாம்.

பயன்படுத்தி ஒரு அடிப்படை முன்னேற்ற பட்டியை உருவாக்க , பின்வரும் படிகளை மேற்கொள்ள வேண்டும்:

• உங்கள் முன்னேற்றப் பட்டியில் HTML கட்டமைப்பை உருவாக்கவும் - HTML குறிச்சொல் ஒரு பணியின் நிறைவு முன்னேற்றத்தைக் குறிப்பிடுகிறது.

• CSS ஐச் சேர்த்தல் - அடுத்த கட்டமாக முன்னேற்றப் பட்டியின் பின்னணி வண்ணத்தையும், பட்டியில் முன்னேற்ற நிலையையும் உதவியுடன் சேர்ப்பது CSS .

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}

• ஜாவாஸ்கிரிப்ட் சேர்க்கிறது - அடுத்த கட்டத்தைப் பயன்படுத்தி டைனமிக் அனிமேஷன் செய்யப்பட்ட ப்ரோஜெஸ் பட்டியை உருவாக்குவது ஜாவாஸ்கிரிப்ட் செயல்பாடுகள் புதுப்பிப்பு மற்றும் காட்சி .

செயல்பாட்டு புதுப்பிப்பு () {var element = document.getElementById ('myprogressBar') var width = 1 var ident = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (அடையாளம்)} else {width ++ element.style.width = அகலம் + '%'}}}

முன்னேற்றப் பட்டியை உருவாக்குவதற்கான வெவ்வேறு படிகளை இப்போது நீங்கள் அறிந்திருக்கிறீர்கள், முன்னேறி, முன்னேற்றப் பட்டியின் முழுமையான எடுத்துக்காட்டைப் பார்ப்போம்.

ஜாவாவில் சரம் முறைக்கு

முன்னேற்றப் பட்டி: எடுத்துக்காட்டு

முன்னேற்றப் பட்டியை உருவாக்குவதற்கான வெவ்வேறு படிகளை நீங்கள் முடித்தவுடன், HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் கூறுகள் . பின்வரும் எடுத்துக்காட்டு மேலே உள்ளவற்றை இணைக்கும் முன்னேற்றப் பட்டியின் முழுமையான குறியீட்டைக் காட்டுகிறது HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் குறியீடுகள்:

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
ஜாவாஸ்கிரிப்ட் பயன்படுத்தி முன்னேற்ற பட்டியின் எடுத்துக்காட்டு
 
ஒரு கோப்பின் நிலையைப் பதிவிறக்குக:
  
பதிவிறக்கம் செயல்பாட்டு புதுப்பிப்பைத் தொடங்கு () element var element = document.getElementById ('myprogressBar') var width = 1 var ident = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (அடையாளம்)} else {அகலம் ++ element.style.width = அகலம் + '%'}}}

வெளியீடு:

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

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

எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? தயவுசெய்து இந்த வலைப்பதிவின் கருத்துகள் பிரிவில் குறிப்பிடவும், நாங்கள் உங்களிடம் திரும்புவோம்.