Αναλογικό ρολόι σε HTML5 με λογική σε JavaScript. Πώς να συγχρονίσετε το ρολόι css με την ώρα Πώς να συγχρονίσετε το ρολόι css με την ώρα

Το NET TIME συγχρονίζει το ρολόι ενός υπολογιστή με άλλον υπολογιστή ή τομέα. Εάν χρησιμοποιείται χωρίς παραμέτρους σε έναν τομέα Windows Server, εμφανίζει την τρέχουσα ημερομηνία και ώρα της ημέρας που έχουν οριστεί στον υπολογιστή που έχει οριστεί ως διακομιστής ώρας για αυτόν τον τομέα. Αυτή η εντολή σάς επιτρέπει να ορίσετε τον διακομιστή ώρας NTP για τον υπολογιστή.

Σύνταξη εντολών NET TIME
  • καθαρός χρόνος [(\\όνομα_υπολογιστή | /domain[:domain_name] | /rtsdomain[:domain_name])]
  • καθαρός χρόνος [\\όνομα_υπολογιστή]
  • καθαρός χρόνος [\\όνομα_υπολογιστή] ], όπου
    • \\όνομα_υπολογιστή- υποδεικνύει το όνομα του διακομιστή στον οποίο θέλετε να ελέγξετε την ώρα ή με τον οποίο θέλετε να συγχρονίσετε το χρονόμετρο.
    • /domain[:domain_name]- καθορίζει το όνομα του τομέα με τον οποίο συγχρονίζεται το ρολόι.
    • /rtsdomain[:domain_name]- καθορίζει τον τομέα του αξιόπιστου διακομιστή ώρας (RTS) με τον οποίο θα συγχρονιστεί το ρολόι.
    • /σειρά- συγχρονίζει το ρολόι με την ώρα του καθορισμένου υπολογιστή ή τομέα.
    • /querysntp- εμφανίζει το όνομα του διακομιστή NTP (Network Time Protocol) που έχει διαμορφωθεί για τοπικός υπολογιστής, ή τον υπολογιστή που καθορίζεται στην παράμετρο \\computer_name.
    • /setsntp[:list_NTP_servers]- καθορίζει μια λίστα διακομιστών ώρας NTP που θα χρησιμοποιηθούν στον τοπικό υπολογιστή.
    Παραδείγματα εντολών NET TIME
    • net help time - εμφάνιση βοήθειας για την καθορισμένη εντολή net.
    • καθαρή ώρα \\PC1 - εμφανίζει την τρέχουσα ώρα του διακομιστή στο δίκτυο για τον υπολογιστή PC1.
    • net time /querysntp - εμφανίζει το όνομα διακομιστή NTP για τον τοπικό υπολογιστή στην οθόνη.
    • καθαρή ώρα \\Proton /set - συγχρονίζει το ρολόι του τοπικού υπολογιστή με την ώρα του υπολογιστή Proton.
    Σφάλμα συστήματος καθαρού χρόνου 5 δεν επιτρέπεται η πρόσβαση

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

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

    Χωρίς ατομικά ρολόγια, η εργασία είναι επί του παρόντος αδύνατη σύγχρονα συστήματαπλοήγησης (συμπεριλαμβανομένων των GPS, GLONASS, Galileo), δορυφορικών και επίγειων τηλεπικοινωνιακών συστημάτων, ιδίως σταθμών κινητών επικοινωνιών.

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

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

    Για να γίνει αυτό, αρκεί να γνωρίζουμε πώς ρυθμίζεται η ώρα συγκεκριμένο μοντέλο(για παράδειγμα, πήραμε το ρολόι χειρός Romanson - mir-chasov.ks.ua/shop/romanson- χρονογράφος), και να έχετε στη διάθεσή σας δεδομένα για την ακριβή ώρα από ένα ατομικό ρολόι (διακομιστής ακριβούς ώρας/site). Με απλά λόγια, απαιτεί ένα εγχειρίδιο χρήσης ρολογιού χειρός και ένα ατομικό ρολόι - τίποτα περίπλοκο.

    Λοιπόν, πώς να συγχρονίσετε το δικό σας ΡΟΛΟΙ ΧΕΙΡΟΣμε ένα ατομικό ρολόι και ρυθμίστε την ακριβή ώρα.

    1. Αρχικά, προετοιμάστε το ρολόι για ρύθμιση. Στα αναλογικά μοντέλα, ο χρόνος ρυθμίζεται από το στέμμα, το οποίο, κατά κανόνα, πρέπει να τραβηχτεί από τη θήκη σε μια συγκεκριμένη θέση (για τη Romanson μας, αυτή είναι η δεύτερη θέση από τις τρεις δυνατές). Για τα ψηφιακά ρολόγια, η ώρα ρυθμίζεται από ένα από τα κουμπιά στη θήκη, το οποίο, αντίθετα, πρέπει να πατηθεί. Να σας υπενθυμίσουμε ότι τα βέλη πρέπει να μετακινούνται μόνο στην πορεία.

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

    3. Μεταβείτε στον διακομιστή ακριβούς ώρας. χρησιμοποιήσαμε δεδομένα από την υπηρεσία time.is (παρεμπιπτόντως, ταυτόχρονα θα μάθετε με πόση ακρίβεια λειτουργεί το ρολόι στον υπολογιστή, το smartphone ή το tablet σας).

    4. Πιάνουμε τη στιγμή που το επόμενο λεπτό αλλάζει στο καντράν του ατομικού ρολογιού και τα δευτερόλεπτα «μηδενίζονται» και βάζουμε το ρολόι μας ένα λεπτό μπροστά. Για παράδειγμα, εάν ο διακομιστής ακριβούς ώρας έδειχνε 12:35:00, τον ορίσαμε σε 12:36. Στη συνέχεια, περιμένουμε μέχρι να πλησιάσει η στιγμή του επόμενου «μηδενισμού» των δευτερολέπτων στο ατομικό ρολόι και να ξεκινήσουμε το ρολόι μας. Δηλαδή, στις 12:35:59 πατάμε το στέμμα του Romanson μας, επιστρέφοντάς το στην κάτω θέση και ξεκινώντας έτσι τον μηχανισμό. Αυτό είναι όλο, τώρα τα ρολόγια μας συγχρονίζονται με τα ατομικά ρολόγια.

    Και εν κατακλείδι, ειδικά για τους λάτρεις της υπερακριβούς ώρας, ας υπενθυμίσουμε/διευκρινίσουμε ότι υπάρχει πάντα ένα σφάλμα μεταξύ των ενδείξεων των πραγματικών ατομικών ρολογιών και των ενδείξεων οποιουδήποτε διακομιστή ακριβούς ώρας. Επιπλέον, υπάρχουν σφάλματα μεταξύ των μετρήσεων του διακομιστή και των ενδείξεων του ρολογιού στην οθόνη της συσκευής από την οποία έγινε πρόσβαση σε αυτόν τον διακομιστή. Με απλά λόγια, μέχρι να φτάσει το σήμα στον διακομιστή και, στη συνέχεια, από τον διακομιστή στη συσκευή επικοινωνίας σας (ο χρόνος μετάβασης εξαρτάται από την απόσταση του διακομιστή, το εύρος ζώνης και τη συμφόρηση των καναλιών Διαδικτύου και μια σειρά από άλλες παραμέτρους), το ατομικό ρολόι αναφοράς θα προχωρήσει ήδη και το ρολόι σας θα προχωρήσει για ένα κλάσμα του δευτερολέπτου, αλλά θα μείνουν πίσω. Επομένως, η διαδικασία ρολογιού που περιγράφεται παραπάνω δεν είναι η πιο τέλεια, αλλά, ωστόσο, σε καθημερινό επίπεδο είναι αρκετή, ειδικά αν χρησιμοποιείτε μηχανικό ρολόι. Το άρθρο χρησιμοποιεί υλικά από τον ιστότοπο της εταιρείας World of Watches.

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

    Κατά τη διεξαγωγή διαφόρων φυσικών μετρήσεων, χρησιμοποιείται ευρέως η έννοια της ταυτόχρονης λειτουργίας δύο ή περισσότερων γεγονότων. Για παράδειγμα, για να προσδιορίσετε το μήκος μιας ράβδου που βρίσκεται κατά μήκος του άξονα Χσυστήματα αναφοράς ΠΡΟΣ ΤΗΝκαι κινείται σε σχέση με αυτό το σύστημα (Εικ. 7.1), είναι απαραίτητο ταυτόχρονα, δηλαδή την ίδια χρονική στιγμή , καθορίστε τις τιμές συντεταγμένων Και άκρα ράβδου:

    . (7.1)

    Για να γίνει αυτό, κάθε σύστημα αναφοράς πρέπει να έχει πολλά ρολόγια τοποθετημένα σε διαφορετικά σημεία του χώρου. Όλα αυτά τα ρολόγια πρέπει να λειτουργούν συντονισμένα, συγχρονισμένα - οι ενδείξεις τους σε κάθε χρονική στιγμή πρέπει να είναι οι ίδιες.

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

    Ο συγχρονισμός ρολογιού μπορεί να γίνει ως εξής. Ας υποθέσουμε ότι, από την αρχή του συστήματος συντεταγμένων του σημείου 0 στο ραδιόφωνο αυτή τη στιγμή μεταδίδεται ραδιοφωνικό σήμα. Τη στιγμή που αυτό το σήμα φτάνει στο ρολόι που βρίσκεται από το σημείο 0 σε γνωστή απόσταση μικρό, τοποθετούνται έτσι ώστε να δείχνουν την ώρα
    , δηλαδή λαμβάνοντας υπόψη τον χρόνο διάδοσης του σήματος. Ως αποτέλεσμα μιας τέτοιας λειτουργίας, όλα τα ρολόγια ενός δεδομένου πλαισίου αναφοράς θα συγχρονίζονται σε κάθε χρονική στιγμή.

    §8. Μεταμόρφωση Lorentz

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

    Νέοι μετασχηματισμοί προήλθαν από τον Αϊνστάιν με βάση τα αξιώματα που διατύπωσε. Τυπικά, συνέπεσαν με τους μετασχηματισμούς που βρέθηκαν νωρίτερα από τον Lorentz σε σχέση με τις προσπάθειες να εξηγηθεί η αποτυχία του πειράματος Michelson. Αλλά μόνο ο Αϊνστάιν αποκάλυψε το βαθύ νόημά τους.

    Εξετάστε δύο αδρανειακά συστήματα αναφοράς ΠΡΟΣ ΤΗΝΚαι ΠΡΟΣ ΤΗΝ"(Εικ. 5.1). Όπως και πριν, το σύστημα ΠΡΟΣ ΤΗΝ" ΠΡΟΣ ΤΗΝπρος την κατεύθυνση του άξονα Χμε σταθερή ταχύτητα . Ας εγκαταστήσουμε πανομοιότυπα ρολόγια σε διαφορετικά σημεία και των δύο συστημάτων αναφοράς και ας τα συγχρονίσουμε: ξεχωριστά τα ρολόγια του συστήματος ΠΡΟΣ ΤΗΝκαι χωριστά το ρολόι του συστήματος ΠΡΟΣ ΤΗΝ". Ας πάρουμε τη στιγμή (
    ), όταν η προέλευση (σημεία 0 Και 0" ) ταιριάξει.

    Από το σύστημα ΠΡΟΣ ΤΗΝ"κινείται σε σχέση με το σύστημα ΠΡΟΣ ΤΗΝομοιόμορφα, η σχέση μεταξύ των συντεταγμένων Και
    θα πρέπει ακόμα, όπως στους μετασχηματισμούς του Γαλιλαίου, να εξαρτώνται γραμμικά από τον χρόνο, δηλαδή

    , (8.1)

    Οπου - κάποιο συντελεστή.

    Μια παρόμοια έκφραση μπορεί να γραφτεί για την αντίστροφη μετάβαση από το σύστημα ΠΡΟΣ ΤΗΝστο σύστημα ΠΡΟΣ ΤΗΝ":

    . (8.2)

    Για τον προσδιορισμό του συντελεστή Ας υποθέσουμε ότι στην αρχική χρονική στιγμή (
    ), όταν σημεία 0 Και 0" συνέπεσε, από το σημείο 0 προς την κατεύθυνση του άξονα Χεστάλη φωτεινό σήμα, το οποίο μετά από λίγο , μετρημένη στο σύστημα ΠΡΟΣ ΤΗΝ, έφτασε στο σημείο ΕΝΑμε συντεταγμένη
    . Στο σύστημα ΠΡΟΣ ΤΗΝ"αυτό το σημείο είχε τη συντεταγμένη
    , Οπου - χρόνος που μετράται στο σύστημα ΠΡΟΣ ΤΗΝ". Σημειώστε ότι η ταχύτητα ΜΕδυνάμει του δεύτερου αξιώματος είναι το ίδιο.

    Αντικατάσταση των συντεταγμένων Και στις εκφράσεις (8.1) και (8.2), λαμβάνουμε

    ,

    .

    Πολλαπλασιάζοντας τη δεξιά και την αριστερή πλευρά αυτών των ισοτήτων και μειώνοντας κατά
    , παίρνουμε

    ,

    (8.4)

    Έτσι, η σχέση μεταξύ των συντεταγμένων
    Και έχει τη μορφή:

    (8.5)

    Για να βρείτε τη σύνδεση μεταξύ Και Ας κάνουμε το εξής. Έχοντας εξαιρέσει από τις εκφράσεις (8.1) και (8.2) την ποσότητα και να τους αποφασίσει μετά από αυτό σχετικά , λαμβάνουμε, λαμβάνοντας υπόψη την έκφραση (8.4):

    (8.6)

    Συντεταγμένες Και
    Και για την εξεταζόμενη κίνηση των συστημάτων ΠΡΟΣ ΤΗΝΚαι ΠΡΟΣ ΤΗΝ"παραμένουν ίσοι μεταξύ τους.

    Έτσι, οι μετασχηματισμοί για συντεταγμένες και χρόνο, που ονομάζονται μετασχηματισμοί Lorentz, έχουν τη μορφή:

    ,
    ,
    ,
    , (8.7)

    Οπου

    Οι αντίστροφοι μετασχηματισμοί, λόγω της ισότητας όλων των αδρανειακών συστημάτων αναφοράς, θα πρέπει να έχουν παρόμοια μορφή, αλλά λαμβάνοντας υπόψη την αλλαγή στο πρόσημο της ταχύτητας V:

    ,
    ,
    ,
    . (8.8)

    Η ανάλυση των τύπων μετασχηματισμού Lorentz μας επιτρέπει να βγάλουμε ορισμένα σημαντικά συμπεράσματα.

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

    Δεύτερον, από τους μετασχηματισμούς Lorentz προκύπτει ότι όταν
    οι ριζοσπαστικές εκφράσεις γίνονται αρνητικές και οι τύποι χάνουν τη φυσική τους σημασία. Αυτό σημαίνει ότι η κίνηση των σωμάτων με ταχύτητα μεγαλύτερη από την ταχύτητα του φωτός στο κενό είναι αδύνατη.

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

    Όταν μελετάς νέα τεχνολογίαή μια γλώσσα προγραμματισμού, οι βασικές έννοιες είναι πάντα σχετικά ρουτίνας στη φύση τους και επομένως, κατά τη γνώμη μου, αποθαρρύνουν γρήγορα τους αρχάριους από τη μάθηση. Ο σκοπός αυτού του άρθρου είναι να ενδιαφέρει και να αιχμαλωτίσει τον αναγνώστη στη μελέτη του προγραμματισμού χρησιμοποιώντας το παράδειγμα της ανάπτυξης στοιχειωδών γραφικών σε δυναμική λειτουργία. Το άρθρο είναι κατάλληλο για αρχάριους προγραμματιστές που έχουν εξοικειωθεί με τα βασικά της HTML5 και της JavaScript και που έχουν βαρεθεί να βλέπουν στατικό κείμενο στη σελίδα όταν εξάγουν πίνακες, αντικείμενα, αποτελέσματα αριθμητικών πράξεων κ.λπ. στην κονσόλα του προγράμματος περιήγησης. Στη συνέχεια, θα εφαρμόσουμε το πιο απλό κινούμενο σχέδιο, αλλά χρήσιμο για την κατανόηση της γλώσσας.Τι θα κάνουμε; Ας εξετάσουμε τη διαδικασία δημιουργίας του απλούστερου αναλογικό ρολόιχρησιμοποιώντας HTML5 και JavaScript. Θα σχεδιάσουμε ρολόγια χρησιμοποιώντας γραφικά πρωτόγονα, χωρίς χρήση Εργαλεία CSS. Θα θυμόμαστε λίγη γεωμετρία για να εμφανίζουμε τα γραφικά μας, θα θυμόμαστε λίγα μαθηματικά για να εφαρμόσουμε τη λογική εμφάνισης του κινούμενου ρολογιού μας. Και γενικά, θα προσπαθήσουμε να μειώσουμε την εντροπία στη γνώση Γλώσσα JavaScript. Για ανάπτυξη, θα χρειαστούμε ένα πρόγραμμα επεξεργασίας κειμένου όπως το Notepad++ ή το Sublime Text 3. Υλοποίηση ψηφιακού ρολογιού Ας δημιουργήσουμε τρία αρχεία στο επεξεργαστής κειμένου. (Και τα τρία αρχεία πρέπει να βρίσκονται στον ίδιο φάκελο).

    index.html- κύρια σελίδα
    clockscript.js- σενάριο με λογική λειτουργίας
    στυλ.css- αρχείο στυλ

    Αρχικά, ας εμφανίσουμε την τρέχουσα ώρα σε κανονική ώρα div-αποκλείστε σε αρχείο .html. Ακόμη και ένα τόσο μικρό έργο έχει τις παγίδες του. Αν απλώς ρίξετε τη λειτουργία εμφάνισης ρολογιού στο συμβάν onload της ετικέτας σώμα, τότε η τρέχουσα ώρα θα εμφανιστεί στη γραμμή, αλλά θα παραμείνει στατική. ΚΑΙ div-Το μπλοκ στο οποίο στείλαμε μια συμβολοσειρά με την τρέχουσα ώρα δεν θα ενημερωθεί μόνο του.

    Φέρνω σε πέρας αυτο-ενημέρωσηΤο στοιχείο σελίδας μπορεί να αναδιπλωθεί αναδιπλώνοντας τη λειτουργία εμφάνισης ώρας σε μια ανώνυμη μέθοδο, η οποία εκχωρείται στην ιδιότητα onload της ρίζας Αντικείμενο παραθύρου.

    Μια επιλογή υλοποίησης θα μπορούσε να είναι η εξής. Αρχείο index.html:

    Ρολόι Πρόχειρο JavaScript. Εργασία με καμβά:
    Αυτή θα είναι η τρέχουσα ώρα

    Αρχείο στυλ.css:

    #clock( γραμματοσειρά-οικογένεια: Tahoma, sans-serif; μέγεθος γραμματοσειράς: 20 px; βάρος γραμματοσειράς: έντονη; χρώμα:#0000cc; )
    Αρχείο clockscript.js:

    Window.onload = function())( window.setInterval(function())( var d = new Date(); document.getElementById("clock").innerHTML = d.toLocaleTimeString(); ) , 1000); )
    Ας τακτοποιήσουμε τη δουλειά clockscript.js:

    Εκτελούμε τον εσωτερικό κώδικα JavaScript δεσμεύοντας το συμβάν onload του αντικειμένου ριζικού παραθύρου:

    Window.onload = συνάρτηση())(/*μπλα μπλα μπλα*/)
    Μια μέθοδος αντικειμένου παραθύρου που εκτελεί κώδικα σε καθορισμένα διαστήματα (καθορίζεται σε χιλιοστά του δευτερολέπτου):

    Window.setInterval(function())(/*Ακολουθούν ενέργειες τυλιγμένες σε μια συνάρτηση που πρέπει να εκτελείται κάθε 1000 χιλιοστά του δευτερολέπτου*/) , 1000);
    Το αντικείμενο Date χρησιμοποιείται για την εκτέλεση διαφόρων χειρισμών ημερομηνίας και ώρας. Χρησιμοποιώντας τον κατασκευαστή, δημιουργούμε ένα στιγμιότυπο του και το καλούμε ρε:

    Var d = new Date();
    Βρίσκουμε ένα αντικείμενο DOM από το αναγνωριστικό του. Αυτό ακριβώς είναι το αντικείμενο στο οποίο θέλουμε να εξάγουμε τον χρόνο μας. Αυτό θα μπορούσε να είναι μια παράγραφος, μια επικεφαλίδα ή κάποιο άλλο στοιχείο. έχω αυτό div-ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Μετά την ανάκτηση ενός στοιχείου ανά αναγνωριστικό, χρησιμοποιούμε την ιδιότητά του innerHTML για να ανακτήσουμε ολόκληρο το περιεχόμενο του στοιχείου μαζί με τη σήμανση μέσα. Και περνάμε το αποτέλεσμα της μεθόδου εκεί toLocaleTimeString()που επιστρέφει μια μορφοποιημένη αναπαράσταση της ώρας:

    Document.getElementById("ρολόι").innerHTML = d.toLocaleTimeString();
    Αυτό πρέπει να πάρετε (ο χρόνος αλλάζει δυναμικά κάθε δευτερόλεπτο):

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

    Για να δείτε τον καμβά μας στο αρχείο index.htmlμέσα στο σώμα πρέπει να τοποθετήσουμε κάπου την παρακάτω ετικέτα, ορίζοντας αμέσως τις διαστάσεις του:


    Τώρα στο αρχείο clockscript.jsΠρέπει να λάβετε το περιβάλλον του αντικειμένου Canvas πριν επιχειρήσετε να σχεδιάσετε. Ας το κάνουμε αυτό στην αρχή της λειτουργίας εμφάνισης του ρολογιού μας. Μετά το αρχείο clockscript.jsθα αλλάξει ως εξής:

    Συνάρτηση displayCanvas())( var canvasHTML = document.getElementById("myCanvas"); var contextHTML = canvasHTML.getContext("2d"); contextHTML.strokeRect(0,0,canvasHTML.width, canvasHTML.height); //Αυτό θα είναι όλη η λογική του ρολογιού και ο κώδικας εμφάνισης μέσω γραφικών primitives επιστροφή; ) window.onload = function())( window.setInterval(function())( var d = new Date(); document.getElementById("clock").innerHTML = d.toLocaleTimeString (); displayCanvas(); ) , 1000); )
    Λοιπόν, ας θυμηθούμε τα μαθηματικά; Είναι σημαντικό για εμάς να κατανοήσουμε τη σύνδεση μεταξύ των διαιρέσεων ορισμένων χεριών και της γωνίας περιστροφής τους στο μελλοντικό καντράν.

    Γωνία περιστροφής όλων των χεριών σε 1 δευτερόλεπτο:

    • Το δεύτερο χέρι θα περιστρέφεται κατά γωνία - (1/60)*360 o = 6 o
    • Ο λεπτοδείκτης θα περιστρέφεται κατά γωνία - (1/60)*6 o = 0,1 o
    • Ο ωροδείκτης θα γυρίσει κατά γωνία - (1/60)*0,1 o ≈ 0,0017 o
    Πρώτο πρόβλημα:

    Δηλαδή, έστω και σε 1 δευτερόλεπτο, πρέπει να γυρίσουν όλα τα βέλη, το καθένα προς την αντίστοιχη γωνία. Και αν αυτό δεν ληφθεί υπόψη, τότε η πρώτη παγίδα που θα έχουμε στην οθόνη θα είναι το άσχημο κινούμενο σχέδιο. Για παράδειγμα, όταν η ώρα είναι 19:30, ο ωροδείκτης θα δείχνει ακριβώς στις 19:00, αν και στην πραγματική ζωή θα πρέπει να είναι ήδη στα μισά του δρόμου έως τις 20:00. Ομοίως, η ομαλή κίνηση του λεπτοδείκτη θα φαίνεται πιο ευχάριστη. Λοιπόν, αφήστε το δεύτερο χέρι να κάνει κλικ σε διακριτές κινήσεις, όπως στα περισσότερα πραγματικά μηχανικά ρολόγια. Λύση στο πρόβλημα: προσθέστε στις γωνίες περιστροφής του τρέχοντος βέλους τη γωνία περιστροφής του ταχύτερου βέλους, πολλαπλασιαζόμενη με έναν συντελεστή που δείχνει το μερίδιό του στη γωνία του τρέχοντος βέλους.

    Εκτέλεση:

    Var t_sec = 6*d.getSeconds(); //Προσδιορίστε τη γωνία για δευτερόλεπτα var t_min = 6*(d.getMinutes() + (1/60)*d.getSeconds()); //Προσδιορίστε τη γωνία για λεπτά var t_hour = 30*(d.getHours() + (1/60)*d.getMinutes()); //Προσδιορίστε τη γωνία για το ρολόι
    Δεύτερο πρόβλημα:

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

    Κι όμως, μετράμε ώρες, λεπτά και δευτερόλεπτα από τον αριθμό 12, την πρώτη θέση. Λύση στο πρόβλημα: στους τύπους μας πρέπει να το λάβουμε υπόψη ως μετατόπιση +π/2 (90 o). Και βάλτε ένα σύμβολο "-" μπροστά από την τιμή της γωνίας έτσι ώστε το ρολόι να τρέχει ακριβώς δεξιόστροφα. Και, φυσικά, λάβετε υπόψη ότι η μεταφορά μιας γωνίας σε μοίρες σε τριγωνομετρικές συναρτήσεις των γλωσσών προγραμματισμού πραγματοποιείται πολλαπλασιάζοντας με τον συντελεστή "π/180 o".

    Υλοποίηση χρησιμοποιώντας το δεύτερο χέρι ως παράδειγμα:

    ContextHTML.moveTo(xCenterClock, yCenterClock); contextHTML.lineTo(xCenterClock + lengthSeconds*Math.cos(Math.PI/2 - t_sec*(Math.PI/180)), yCenterClock - lengthSeconds*Math.sin(Math.PI/2 - t_sec*(Math.PI/ 180)));
    Τρίτο πρόβλημα:

    Όταν επισημαίνετε τα μοτίβα καντράν, πρέπει να επισημάνετε με κάποιο τρόπο τα μοτίβα απέναντι από το ρολόι. Υπάρχουν 60 εικόνες συνολικά για δευτερόλεπτα και λεπτά. 12 - για ώρες. Αυτά τα 12 πρέπει με κάποιο τρόπο να ξεχωρίζουν από όλα τα άλλα. Επίσης, η συμμετρία της ψηφιοποίησης εξαρτάται από το πλάτος των ψηφίων. Προφανώς, οι αριθμοί 10, 11 και 12 είναι ευρύτεροι από το 1, 2, 3 κ.λπ. Δεν πρέπει να το ξεχνάμε αυτό.

    Λύση στο πρόβλημα και επιλογή ψηφιοποίησης του καντράν:

    For(var th = 1; th