Πρόγραμμα JavaScript για τη δημιουργία χρονόμετρου αντίστροφης μέτρησης

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

Για να κατανοήσετε αυτό το παράδειγμα, θα πρέπει να γνωρίζετε τις ακόλουθες ενότητες προγραμματισμού JavaScript:

  • Όροφος μαθηματικών JavaScript ()
  • Ημερομηνία και ώρα JavaScript
  • Javascript setInterval ()

Παράδειγμα: Δημιουργήστε ένα χρονόμετρο αντίστροφης μέτρησης

 // program to create a countdown timer // time to countdown from (in milliseconds) let countDownDate = new Date().getTime() + 24 * 60 * 60 * 1000; // countdown timer let x = setInterval(function() ( // get today's date and time in milliseconds let now = new Date().getTime(); // find the interval between now and the countdown time let timeLeft = countDownDate - now; // time calculations for days, hours, minutes and seconds const days = Math.floor( timeLeft/(1000*60*60*24) ); const hours = Math.floor( (timeLeft/(1000*60*60)) % 24 ); const minutes = Math.floor( (timeLeft/1000/60) % 60 ); const seconds = Math.floor( (timeLeft/1000) % 60 ); // display the result in the element with console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); // clearing countdown when complete if (timeLeft < 0) ( clearInterval(x); console.log('CountDown Finished'); ) ), 2000);

Παραγωγή

 0d 23h 59m 57s 0d 23h 59m 55s 0d 23h 59m 53s 0d 23h 59m 51s…

Στο παραπάνω πρόγραμμα, η setInterval()μέθοδος χρησιμοποιείται για τη δημιουργία χρονοδιακόπτη.

Η setInterval()μέθοδος εκτελείται σε ένα δεδομένο χρονικό διάστημα (εδώ, 2000 χιλιοστά του δευτερολέπτου).

Το new Date()δίνει την τρέχουσα ημερομηνία και ώρα. Για παράδειγμα,

 let d1 = new Date(); console.log(time); // Fri Aug 28 2020 09:19:40 GMT+0545 (+0545)

Η getTime()μέθοδος επιστρέφει τον αριθμό χιλιοστών του δευτερολέπτου από τα μεσάνυχτα της 1ης Ιανουαρίου 1970 (εποχή EcmaScript) στην καθορισμένη ημερομηνία (εδώ, τρέχουσα ημερομηνία).

Ο παρακάτω κώδικας δίνει την ώρα της επόμενης ημέρας σε χιλιοστά του δευτερολέπτου.

 new Date().getTime() + 24 * 60 * 60 * 1000;

Τώρα, μπορούμε να υπολογίσουμε τον χρόνο που απομένει χρησιμοποιώντας τον ακόλουθο τύπο:

 let timeLeft = countDownDate - now;

Ο υπόλοιπος αριθμός ημερών υπολογίζεται χρησιμοποιώντας:

  • Το χρονικό διάστημα διαιρείται με 1000 για τον προσδιορισμό του αριθμού των δευτερολέπτων, δηλαδήtimeLeft / 1000
  • Το χρονικό διάστημα στη συνέχεια διαιρείται με 60 * 60 * 24 για τον προσδιορισμό του αριθμού των ημερών που απομένουν.
  • Η Math.floor()συνάρτηση χρησιμοποιείται για στρογγυλοποίηση του αριθμού σε ακέραιο αριθμό.

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

Σημείωση : Μπορείτε επίσης να χρησιμοποιήσετε έναν προσαρμοσμένο χρόνο αντίστροφης μέτρησης ξεκινώντας μια συγκεκριμένη ημερομηνία.

Για παράδειγμα,

 let countDownDate = new Date("Aug 5, 2025 14:22:36").getTime();

ενδιαφέροντα άρθρα...