Πώς να φτιάξετε ένα κουμπί με κωδικό

Πίνακας περιεχομένων:

Πώς να φτιάξετε ένα κουμπί με κωδικό
Πώς να φτιάξετε ένα κουμπί με κωδικό

Βίντεο: Πώς να φτιάξετε ένα κουμπί με κωδικό

Βίντεο: Πώς να φτιάξετε ένα κουμπί με κωδικό
Βίντεο: Πως Να Κάνεις Το Πληκτρολόγιο Σου Πραγματικά Όμορφο 2024, Απρίλιος
Anonim

Κατά τη δημιουργία σελίδων, μερικές φορές είναι απαραίτητο όταν κάνετε κλικ στο κουμπί που βρίσκεται στη σελίδα, να εμφανιστεί στο πρόγραμμα περιήγησης κάποιο συμβάν που έχει προγραμματιστεί από τον συντάκτη. Για να το κάνετε αυτό, πρέπει να τοποθετήσετε τον κώδικα JavaScript στο παραγόμενο έγγραφο και να τον συνδέσετε με το απαιτούμενο κουμπί. Ανάλογα με την ποσότητα του κώδικα που απαιτείται για την υλοποίηση του προβλεπόμενου συμβάντος, μπορείτε να χρησιμοποιήσετε διαφορετικούς τρόπους για να συνδέσετε το κουμπί στον κώδικα.

Πώς να φτιάξετε ένα κουμπί με κωδικό
Πώς να φτιάξετε ένα κουμπί με κωδικό

Οδηγίες

Βήμα 1

Τις περισσότερες φορές, οι κλήσεις κώδικα JavaScript συνδέονται με το συμβάν onclick, δηλαδή με το κλικ στο αριστερό κουμπί του ποντικιού. Εάν δεν χρειάζεστε πολύ κώδικα για να περιγράψετε τη δράση που πρέπει να συμβεί, τότε όλα αυτά μπορούν να τοποθετηθούν απευθείας στην ετικέτα κουμπιού. Για παράδειγμα, για να προγραμματίσετε το πρόγραμμα περιήγησης να εμφανίζει ένα απλό μήνυμα όταν κάνετε κλικ σε ένα κουμπί, το σενάριο JavaScript θα μοιάζει με αυτό: ειδοποίηση («Ο κώδικας λειτούργησε!») Χρειάζεται μόνο μία δήλωση και κείμενο. Όλα αυτά μπορούν εύκολα να τοποθετηθούν στην περιγραφή συμβάντος onclick της ετικέτας κουμπιού. Σε αυτήν την περίπτωση, ο απλούστερος κώδικας HTML της σελίδας μπορεί να έχει την εξής μορφή:

Κουμπί με κωδικό

Κουμπί με κωδικό

Βήμα 2

Δεν είναι πρακτικό να τοποθετείτε πιο περίπλοκο κώδικα JavaScript απευθείας στην ετικέτα κουμπιού. Είναι πιο εύκολο να δημιουργήσετε μια ξεχωριστή λειτουργία από αυτήν και να πραγματοποιήσετε την κλήση του στο συμβάν onclick. Για παράδειγμα, αυτό μπορεί να μοιάζει με μια συνάρτηση που δείχνει ένα παράθυρο που περιέχει την ώρα ενός κουμπιού κλικ: function getTime () {

var now = νέα ημερομηνία ();

alert ("Ο κώδικας λειτούργησε στο" + now.getHours () + ":" + now.getMinutes ());

} Θα πρέπει να τοποθετηθεί στην κεφαλίδα της σελίδας (μεταξύ των ετικετών και). Ο πλήρης κωδικός της σελίδας με μια κλήση σε αυτήν τη λειτουργία συνδεδεμένη στο κουμπί μπορεί να έχει την εξής μορφή:

Κουμπί κλήσης λειτουργίας

συνάρτηση getTime () {

var now = νέα ημερομηνία ();

alert ("Ο κώδικας λειτούργησε στο" + now.getHours () + ":" + now.getMinutes ());

}

Κουμπί κλήσης λειτουργίας

Βήμα 3

Η ίδια μέθοδος θα πρέπει να χρησιμοποιείται όταν κάνετε κλικ σε διάφορα κουμπιά θα πρέπει να δημιουργήσει ένα συμβάν που μπορεί να περιγραφεί με τον ίδιο κώδικα JavaScript. Για παράδειγμα, μπορείτε να τροποποιήσετε ελαφρώς την προηγούμενη συνάρτηση για να προσθέσετε την ταυτότητα του πατημένου κουμπιού στο πλαίσιο μηνύματος: συνάρτηση getTime (btnString) {

var now = νέα ημερομηνία ();

ειδοποίηση (btnString + "κλικ στο" + now.getHours () + ":" + now.getMinutes ());

} Ο πλήρης κωδικός για μια σελίδα με τρία τέτοια κουμπιά μπορεί να έχει την εξής μορφή:

Τρία κουμπιά με μια κλήση λειτουργίας

συνάρτηση getTime (btnString) {

var now = νέα ημερομηνία ();

ειδοποίηση (btnString + "κλικ στο" + now.getHours () + ":" + now.getMinutes ());

}

Πρώτο κουμπί

Δεύτερο κουμπί

Τρίτο κουμπί

Συνιστάται: