Οι γραμμές προόδου χρησιμοποιούνται για τον προσδιορισμό ορισμένων ορόσημων κατά τη διάρκεια μιας εργασίας σε ποσοστό. Μπορείτε να δημιουργήσετε μια γραμμή προόδου στο που καθορίζει την πρόοδο ολοκλήρωσης μιας εργασίας. Η τιμή της γραμμής προόδου μπορεί να χειριστεί με JavaScript. Σε αυτό το άρθρο, θα δούμε πώς μπορείτε να δημιουργήσετε μια γραμμή προόδου με τη βοήθεια HTML, CSS και JavaScript με την ακόλουθη ακολουθία:
Ας ξεκινήσουμε.
Πώς να δημιουργήσετε μια γραμμή προόδου σε HTML;
Μια γραμμή προόδου απεικονίζει την πρόοδο κάθε εργασίας που εκτελείται. Γενικά, αυτές οι γραμμές χρησιμοποιούνται για την εμφάνιση της κατάστασης λήψης και μεταφόρτωσης. Μπορούμε να πούμε ότι οι γραμμές προόδου μπορούν να χρησιμοποιηθούν για την απεικόνιση της κατάστασης οτιδήποτε βρίσκεται σε εξέλιξη.
Για να δημιουργήσετε μια βασική γραμμή προόδου χρησιμοποιώντας , πρέπει να εκτελεστούν τα ακόλουθα βήματα:
- Δημιουργήστε δομή HTML για τη γραμμή προόδου σας - Το HTML ετικέτα καθορίζει μια πρόοδο ολοκλήρωσης μιας εργασίας.
- Προσθήκη CSS - Το επόμενο βήμα είναι να προσθέσετε το χρώμα φόντου της γραμμής προόδου καθώς και την κατάσταση προόδου στη γραμμή με τη βοήθεια του CSS .
#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {πλάτος: 1% ύψος: 35px φόντο-χρώμα: # 4CAF50 κείμενο-ευθυγράμμιση: κεντρικό ύψος γραμμής: 32px χρώμα: μαύρο}- Προσθήκη JavaScript - Το επόμενο βήμα είναι να δημιουργήσετε μια δυναμική κινούμενη μπάρα progess χρησιμοποιώντας λειτουργίες javascript εκσυγχρονίζω και σκηνή .
συνάρτηση ενημέρωσης () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (σκηνή, 10) σκηνή λειτουργίας () {if (πλάτος> = 100) {clearInterval (ταυτότητα)} άλλο {πλάτος ++ element.style.width = πλάτος + '%'}}}Τώρα που γνωρίζετε τα διάφορα βήματα για να δημιουργήσετε μια γραμμή προόδου, ας προχωρήσουμε και ρίξτε μια ματιά στο πλήρες παράδειγμα μιας γραμμής προόδου.
Γραμμή προόδου: Παράδειγμα
Μόλις ολοκληρώσετε τα διάφορα βήματα για να δημιουργήσετε μια γραμμή προόδου, ήρθε η ώρα να συνδέσετε τα HTML, CSS και Στοιχεία JavaScript . Το παρακάτω παράδειγμα δείχνει τον πλήρη κώδικα της γραμμής προόδου που συνδέει τα παραπάνω HTML, CSS και JavaScript Κωδικοί:
#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {πλάτος: 2% ύψος: 20px φόντο-χρώμα: # 4CAF50}Παράδειγμα γραμμής προόδου με χρήση JavaScript
Λήψη κατάστασης ενός αρχείου:
Έναρξη λήψης ενημέρωσης λειτουργίας () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (σκηνή, 10) σκηνή λειτουργίας () {if (πλάτος> = 100) {clearInterval (ταυτότητα)} άλλο {width ++ element.style.width = width + '%'}}}Παραγωγή:
μαριονέτα εναντίον ασφάλτου εναντίον σεφ
Με αυτό, φτάσαμε στο τέλος του άρθρου μας. Ελπίζω να καταλάβατε τα διάφορα βήματα που απαιτούνται για τη δημιουργία μιας γραμμής προόδου.
Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.
Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων αυτού του ιστολογίου και θα επικοινωνήσουμε μαζί σας.