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

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

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





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



πώς να βρείτε το κλειδί ενός λογισμικού τραγουδιών

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





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

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

Δομή φακέλου του έργου Digitalηφιακό ρολόι

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



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

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





Digital Clock Using JavaScript






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



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

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

function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = '';
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}
Time();

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

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



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

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

var date = new Date();

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

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

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

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

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

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}

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

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

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

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}

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

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

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}

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

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

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

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

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

setTimeout(Time, 1000);

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

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

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

/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');

#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 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 div. Ο επιλογέας id χρησιμοποιεί το ταυτότητα χαρακτηριστικό ενός στοιχείου HTML για την επιλογή ενός συγκεκριμένου στοιχείου.

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

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

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

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

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

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

windows defender προστασία σε πραγματικό χρόνο γκριζαρισμένο

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

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς να δημιουργήσετε έναν απλό υπολογιστή με HTML, CSS και JavaScript

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

Διαβάστε Επόμενο Σχετικά θέματα Σχετικά με τον Συγγραφέα Γιουβράι Τσάντρα(Δημοσιεύθηκαν 60 άρθρα)

Ο Yuvraj είναι προπτυχιακός φοιτητής Πληροφορικής στο Πανεπιστήμιο του Δελχί, Ινδία. Είναι παθιασμένος με το Full Stack Web Development. Όταν δεν γράφει, εξερευνά το βάθος διαφορετικών τεχνολογιών.

Περισσότερα από τον Yuvraj Chandra

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή