פסי ההתקדמות משמשים לקביעת אבני דרך מסוימות במהלך משימה באחוזים. אתה יכול ליצור סרגל התקדמות ב המציין את התקדמות השלמת המשימה. ניתן לשנות את הערך של סרגל ההתקדמות על ידי JavaScript. במאמר זה נראה כיצד ניתן ליצור סרגל התקדמות בעזרת HTML, CSS ו- JavaScript ברצף הבא:
בואו נתחיל.
כיצד ליצור סרגל התקדמות ב- HTML?
סרגל התקדמות מתאר את התקדמותה של כל משימה המתבצעת. באופן כללי, סורגים אלה משמשים להצגת סטטוס ההורדה וההעלאה. אנו יכולים לומר כי ניתן להשתמש בסרגלי התקדמות כדי לתאר את מעמדם של כל מה שמתבצע.
ליצירת סרגל התקדמות בסיסי באמצעות , יש לבצע את השלבים הבאים:
- צור מבנה HTML עבור סרגל ההתקדמות שלך - ה- HTML תָג מציין התקדמות השלמה של משימה.
- הוספת CSS - השלב הבא הוא להוסיף צבע רקע של סרגל ההתקדמות וכן את מצב ההתקדמות בסרגל בעזרת CSS .
#Progress_Status {רוחב: 50% צבע רקע: #ddd} #myprogressBar {רוחב: 1% גובה: 35px צבע רקע: # 4CAF50 יישור טקסט: גובה קו מרכז: 32px צבע: שחור}- הוספת JavaScript - השלב הבא הוא ליצור סרגל פרוגס מונפש דינמי באמצעות פונקציות javascript עדכון ו סְצֵינָה .
עדכון פונקציה () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) scene scene () {if (width> = 100) {clearInterval (identity)} אחר {רוחב ++ element.style.width = width + '%'}}}עכשיו שאתה מכיר את הצעדים השונים ליצירת סרגל התקדמות, בוא נעבור ונסתכל על הדוגמה המלאה של סרגל התקדמות.
סרגל התקדמות: דוגמה
לאחר שתשלים את השלבים השונים ליצירת סרגל התקדמות, הגיע הזמן לקשר את ה- HTML, CSS ו- אלמנטים של JavaScript . הדוגמה הבאה מציגה את הקוד השלם של סרגל ההתקדמות המקשר את האמור לעיל HTML, CSS ו- JavaScript קודים:
#Progress_Status {רוחב: 50% צבע רקע: #ddd} #myprogressBar {רוחב: 2% גובה: 20px צבע רקע: # 4CAF50}דוגמה לסרגל התקדמות באמצעות JavaScript
הורד סטטוס של קובץ:
התחל הורדת עדכון פונקציה () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) scene scene () {if (width> = 100) {clearInterval (identity)} אחר {width ++ element.style.width = width + '%'}}}תְפוּקָה:
בכך הגענו לסוף המאמר שלנו. אני מקווה שהבנת את הצעדים השונים הנדרשים ליצירת סרגל התקדמות.
בדוק את שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו גורמת לך להיות בקיאים במיומנויות לעבוד עם טכנולוגיות אינטרנט מקדימות וקדמיות. הוא כולל הדרכה בנושא פיתוח אתרים, jQuery, Angular, NodeJS, ExpressJS ו- MongoDB.
ההבדל בין c c ++ ו- java
יש לך שאלה עבורנו? אנא הזכיר זאת במדור התגובות בבלוג זה ונחזור אליך.