Πώς να δημιουργήσετε ένα ψηφιακό ρολόι χρησιμοποιώντας HTML, CSS και JavaScript

Το Ψηφιακό Ρολόι είναι από τα καλύτερα έργα για αρχάριους σε JavaScript. Είναι πολύ εύκολο να το μάθεις για άτομα κάθε επιπέδου δεξιοτήτων.

Σε αυτό το άρθρο, θα μάθετε πώς να δημιουργείτε ένα δικό σας ψηφιακό ρολόι χρησιμοποιώντας HTML, CSS και JavaScript. Θα αποκτήσετε πρακτική εμπειρία με διάφορες έννοιες JavaScript όπως τη δημιουργία μεταβλητών, τη χρήση συναρτήσεων, την εργασία με ημερομηνίες, την πρόσβαση και την προσθήκη ιδιοτήτων στο DOM και άλλα.

Ας αρχίσουμε.

Συστατικά του ψηφιακού ρολογιού

Το ψηφιακό ρολόι έχει τέσσερα μέρη: ώρα, λεπτό, δευτερόλεπτο και μεσημέρι.

Δομή φακέλων του έργου Digital Clock

Δημιουργήστε έναν ριζικό φάκελο που περιέχει τα αρχεία HTML, CSS και JavaScript. Μπορείτε να ονομάσετε τα αρχεία οτιδήποτε θέλετε. Εδώ ονομάζεται ο ριζικός φάκελος Ψηφιακό ρολόϊ. Σύμφωνα με την τυπική σύμβαση ονομασίας, τα αρχεία HTML, CSS και JavaScript ονομάζονται index.html, styles.css, και script.js αντίστοιχα.

Προσθήκη δομής στο ψηφιακό ρολόι χρησιμοποιώντας HTML

Ανοιξε το index.html αρχειοθετήστε και επικολλήστε τον ακόλουθο κώδικα:

Εδω ενα div δημιουργείται με ένα ταυτότητα του ψηφιακό ρολόϊ. Αυτό το div χρησιμοποιείται για την εμφάνιση του ψηφιακού ρολογιού χρησιμοποιώντας JavaScript. styles.css είναι μια εξωτερική σελίδα CSS και συνδέεται με τη σελίδα HTML χρησιμοποιώντας ένα ετικέτα. Ομοίως, script.js είναι μια εξωτερική σελίδα JS και συνδέεται με τη σελίδα HTML χρησιμοποιώντας το <σενάριο> ετικέτα.

Προσθήκη λειτουργικότητας στο ψηφιακό ρολόι χρησιμοποιώντας JavaScript

Ανοιξε το script.js αρχειοθετήστε και επικολλήστε τον ακόλουθο κώδικα:

Χρόνος λειτουργίας () {
// Δημιουργία αντικειμένου της κλάσης Ημερομηνία
var ημερομηνία = νέα ημερομηνία ();
// Λάβετε τρέχουσα ώρα
var hour = date.getHours ();
// Λάβετε τρέχον λεπτό
var minute = date.getMinutes ();
// Λάβετε το τρέχον δευτερόλεπτο
var second = date.getSeconds ();
// Μεταβλητή για αποθήκευση ΠΜ / ΜΜ
var περίοδο = "";
// Αντιστοίχιση AM / PM σύμφωνα με την τρέχουσα ώρα
αν (ώρα> = 12) {
περίοδος = "PM";
} αλλιώς {
περίοδος = "ΠΜ";
}
// Μετατροπή της ώρας σε μορφή 12 ωρών
αν (ώρα == 0) {
ώρα = 12;
} αλλιώς {
εάν (ώρα> 12) {
ώρα = ώρα - 12;
}
}
// Ενημέρωση ώρας, λεπτού και δευτερολέπτου
// εάν είναι μικρότερα από 10
ώρα = ενημέρωση (ώρα);
λεπτό = ενημέρωση (λεπτό);
δεύτερο = ενημέρωση (δεύτερο);
// Προσθήκη στοιχείων χρόνου στο div
document.getElementById ("digital-clock"). innerText = ώρα + ":" + λεπτό + ":" + δευτερόλεπτο + "" + τελεία;
// Ρύθμιση χρονοδιακόπτη σε 1 δευτερόλεπτο (1000 ms)
setTimeout (Ώρα, 1000);
}
// Λειτουργία ενημέρωσης στοιχείων χρόνου εάν είναι μικρότερα από 10
// Προσάρτηση 0 πριν από τα στοιχεία, εάν είναι μικρότερα από 10
ενημέρωση λειτουργίας (t) {
αν (t <10) {
επιστροφή "0" + t;
}
αλλιώς {
επιστροφή t;
}
}
Χρόνος();

Κατανόηση του κώδικα JavaScript

ο Χρόνος() και εκσυγχρονίζω() Οι λειτουργίες χρησιμοποιούνται για την προσθήκη λειτουργικότητας στο Ψηφιακό Ρολόι.

Λήψη των στοιχείων της τρέχουσας ώρας

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

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

Η τρέχουσα ημερομηνία και ώρα θα αποθηκευτούν στο ημερομηνία μεταβλητός. Τώρα πρέπει να εξαγάγετε την τρέχουσα ώρα, λεπτό και δεύτερο από το αντικείμενο ημερομηνίας.

date.getHours (), date.getMinutes (), και date.getSeconds () χρησιμοποιούνται για να λάβουν την τρέχουσα ώρα, λεπτό και δευτερόλεπτο αντίστοιχα από το αντικείμενο ημερομηνίας. Όλα τα στοιχεία χρόνου αποθηκεύονται σε ξεχωριστές μεταβλητές για περαιτέρω λειτουργίες.

var hour = date.getHours ();
var minute = date.getMinutes ();
var second = date.getSeconds ();

Εκχώρηση του τρέχοντος μεσημβρινού (ΠΜ / ΜΜ)

Επειδή το Ψηφιακό Ρολόι είναι σε μορφή 12 ωρών, πρέπει να αντιστοιχίσετε το κατάλληλο μεσημβρινό σύμφωνα με την τρέχουσα ώρα. Εάν η τρέχουσα ώρα είναι μεγαλύτερη ή ίση με 12, τότε το μεσημβρινό είναι ΜΜ (Post Meridiem) διαφορετικά, είναι AM (Ante Meridiem).

var περίοδο = "";
αν (ώρα> = 12) {
περίοδος = "PM";
} αλλιώς {
περίοδος = "ΠΜ";
}

Μετατροπή της τρέχουσας ώρας σε μορφή 12 ωρών

Τώρα πρέπει να μετατρέψετε την τρέχουσα ώρα σε μορφή 12 ωρών. Εάν η τρέχουσα ώρα είναι 0, τότε η τρέχουσα ώρα ενημερώνεται σε 12 (σύμφωνα με τη μορφή 12 ωρών). Επίσης, εάν η τρέχουσα ώρα είναι μεγαλύτερη από 12, μειώνεται κατά 12 για να διατηρείται ευθυγραμμισμένη με τη μορφή ώρας 12 ωρών.

Σχετιζομαι με: Πώς να απενεργοποιήσετε την επιλογή κειμένου, αποκοπή, αντιγραφή, επικόλληση και δεξί κλικ σε μια ιστοσελίδα

αν (ώρα == 0) {
ώρα = 12;
} αλλιώς {
εάν (ώρα> 12) {
ώρα = ώρα - 12;
}
}

Ενημέρωση των στοιχείων χρόνου

Πρέπει να ενημερώσετε τα στοιχεία χρόνου εάν είναι μικρότερα από 10 (Μονοψήφιο). Το 0 προσαρτάται σε όλα τα μονοψήφια στοιχεία χρόνου (ώρα, λεπτό, δευτερόλεπτο).

ώρα = ενημέρωση (ώρα);
λεπτό = ενημέρωση (λεπτό);
δεύτερο = ενημέρωση (δεύτερο);
ενημέρωση λειτουργίας (t) {
αν (t <10) {
επιστροφή "0" + t;
}
αλλιώς {
επιστροφή t;
}
}

Προσθήκη των στοιχείων χρόνου στο DOM

Πρώτον, η πρόσβαση στο DOM χρησιμοποιεί το αναγνωριστικό του target div (ψηφιακό ρολόϊ). Στη συνέχεια, τα στοιχεία χρόνου αντιστοιχίζονται στο div χρησιμοποιώντας το εσωτερικό κείμενο θέτων.

document.getElementById ("digital-clock"). innerText = ώρα + ":" + λεπτό + ":" + δευτερόλεπτο + "" + τελεία;

Ενημέρωση του ρολογιού κάθε δευτερόλεπτο

Το ρολόι ενημερώνεται κάθε δευτερόλεπτο χρησιμοποιώντας το setTimeout () μέθοδος σε JavaScript.

setTimeout (Ώρα, 1000);

Στυλ του ψηφιακού ρολογιού με χρήση CSS

Ανοιξε το styles.css αρχειοθετήστε και επικολλήστε τον ακόλουθο κώδικα:

Σχετιζομαι με: Τρόπος χρήσης του CSS box-shadow: Κόλπα και παραδείγματα

/ * Εισαγωγή γραμματοσειράς Open Sans Συμπυκνωμένης Google * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#ψηφιακό ρολόϊ {
χρώμα φόντου: # 66ffff;
πλάτος: 35%;
περιθώριο: αυτόματο;
επένδυση: 50px;
κάτω μέρος: 50px;
font-family: 'Open Sans Condensed', sans-serif;
μέγεθος γραμματοσειράς: 64px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);
}

Το παραπάνω CSS χρησιμοποιείται για το στυλ του ψηφιακού ρολογιού. Εδώ, χρησιμοποιείται η γραμματοσειρά Open Sans Συμπυκνωμένη για την εμφάνιση του κειμένου του ρολογιού. Εισάγεται από γραμματοσειρές Google χρησιμοποιώντας @εισαγωγή. ο #ψηφιακό ρολόϊ Ο επιλογέας id χρησιμοποιείται για την επιλογή του στόχου div. Ο επιλογέας ταυτότητας χρησιμοποιεί το ταυτότητα χαρακτηριστικό ενός στοιχείου HTML για να επιλέξετε ένα συγκεκριμένο στοιχείο.

Σχετιζομαι με: Απλά παραδείγματα κώδικα CSS που μπορείτε να μάθετε σε 10 λεπτά

Εάν θέλετε να ρίξετε μια ματιά στον πλήρη πηγαίο κώδικα που χρησιμοποιείται σε αυτό το άρθρο, εδώ είναι το Αποθήκη GitHub. Επίσης, εάν θέλετε να ρίξετε μια ματιά στη ζωντανή έκδοση αυτού του έργου, μπορείτε να το δείτε Σελίδες GitHub.

Σημείωση: Ο κωδικός που χρησιμοποιείται σε αυτό το άρθρο είναι Το MIT διαθέτει άδεια.

Αναπτύξτε άλλα έργα JavaScript

Εάν είστε αρχάριος στο JavaScript και θέλετε να είστε καλός προγραμματιστής ιστού, πρέπει να δημιουργήσετε μερικά καλά έργα που βασίζονται σε JavaScript. Μπορούν να προσθέσουν αξία στο βιογραφικό σας καθώς και στην καριέρα σας.

Μπορείτε να δοκιμάσετε ορισμένα έργα όπως το Calculator, ένα παιχνίδι Hangman, το Tic Tac Toe, μια εφαρμογή καιρού JavaScript, μια διαδραστική σελίδα προορισμού, ένα εργαλείο μετατροπής βάρους, ένα ψαλίδι χαρτιού κ.λπ.

Αν ψάχνετε για το επόμενο έργο που βασίζεται σε JavaScript, ένας απλός υπολογιστής είναι μια εξαιρετική επιλογή.

Πώς να δημιουργήσετε έναν απλό υπολογιστή χρησιμοποιώντας HTML, CSS και JavaScript

Ο απλός υπολογισμένος κώδικας είναι ο τρόπος που πρέπει να ακολουθήσετε κατά τον προγραμματισμό. Δείτε πώς μπορείτε να δημιουργήσετε τη δική σας αριθμομηχανή σε HTML, CSS και JS.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα