Ένας διαδικτυακός χρονοδιακόπτης θα σας επιτρέψει να παρακολουθείτε την ώρα πριν από διάφορα γεγονότα - ακόμα κι αν βράζει αυγά. Με ένα χρονόμετρο αντίστροφης μέτρησης σίγουρα δεν θα χάσετε την κατάλληλη στιγμή.

Για να ρυθμίσετε έναν χρονοδιακόπτη, πρέπει να κάνετε κλικ στο κουμπί "Ρύθμιση χρονοδιακόπτη" και να καθορίσετε τον απαιτούμενο χρόνο (ώρες, λεπτά και δευτερόλεπτα) στο αναδυόμενο παράθυρο ή μπορείτε να επιλέξετε να καθορίσετε μια συγκεκριμένη ημερομηνία και ώρα για να φωτιά μετά από λίγες μέρες. Εάν πρέπει να ειδοποιήσετε με ήχο όταν φτάσει η καθορισμένη ώρα, επιλέξτε τη μελωδία που θέλετε από τη λίστα (μπορείτε να ακούσετε κάθε μελωδία). Μπορείτε επίσης να καθορίσετε ένα μήνυμα που θα εμφανίζεται στην οθόνη όταν ενεργοποιείται το χρονόμετρο αντίστροφης μέτρησης. Αφού καθορίσετε όλες τις απαραίτητες πληροφορίες, κάντε κλικ στο «Έναρξη» για να ξεκινήσει ο διαδικτυακός χρονοδιακόπτης.

Θυμηθείτε ότι για να λειτουργήσει ένας διαδικτυακός χρονοδιακόπτης με ήχο στον υπολογιστή ή το τηλέφωνό σας, πρέπει να είναι ενεργοποιημένη η ένταση του ηχείου (στο τηλέφωνό σας πρέπει να βεβαιωθείτε ότι ο ήχος "Μέσα" έχει ρυθμιστεί στο επιθυμητό επίπεδο)! Εάν δεν χρειάζεται να παίξετε τη μελωδία, μπορείτε να καταργήσετε την επιλογή του πλαισίου ελέγχου "Κλήση χρονοδιακόπτη". Σε αυτή την περίπτωση, θα εμφανίζεται μόνο το μήνυμα.

Για να λειτουργεί σωστά ο online χρονοδιακόπτης, ΔΕΝ υπάρχει ανάγκη για συνεχή σύνδεση στο Διαδίκτυο, αλλά ΔΕΝ θα λειτουργήσει εάν το πρόγραμμα περιήγησης είναι κλειστό ή ο υπολογιστής είναι απενεργοποιημένος/σε κατάσταση αναστολής λειτουργίας.

Σε αυτό το άρθρο θα εξετάσουμε διάφορες επιλογές χρονοδιακόπτη.

Επιλογή 1.
Ένα απλό χρονόμετρο που χρησιμοποιεί μόνο λεπτά και δευτερόλεπτα



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

Αυτό ήταν, το χρονόμετρο είναι έτοιμο.

Επιλογή 2.
Οι αριθμοί για το χρονόμετρο θα είναι μια εικόνα. Επίσης σε αυτό το χρονόμετρο, εκτός από λεπτά και δευτερόλεπτα, είναι διαθέσιμες ώρες και ημέρες. Το χρονόμετρο μας θα μετρήσει αντίστροφα μέχρι μια συγκεκριμένη ημέρα.

Σχεδιάζοντας τη σελίδα


Χρονόμετρο αντίστροφης μέτρησης




Η εικόνα digits2_orange.png θα χρησιμοποιηθεί για την εμφάνιση της ώρας

Στη συνέχεια γράφουμε τον κώδικα js



var t=Date.parse(deadline)-Date.parse(new Date());
var seconds = Math.floor((t/1000) % 60);
var λεπτά = Math.floor((t/1000/60) % 60);
var ώρες = Math.floor((t/(1000*60*60)) % 24);
var ημέρες = Math.floor(t/(1000*60*60*24));

$(συνάρτηση())(
$("#counter").countdown((
εικόνα: "pic/digits2_orange.png",
startTime: days+":"+hours+":"+minutes+":"+second,
timerEnd: function())(
$("#tut").html("Το χρονόμετρο ολοκλήρωσε την εργασία του");
}
});
});
εικόνα - η εικόνα μας
startTime είναι ακριβώς ο χρόνος που απομένει μέχρι τις 01/09/2017
timerEnd - τι συμβαίνει όταν τελειώνει το χρονόμετρο στην περίπτωσή μας, η αντίστοιχη επιγραφή θα εισαχθεί στο κοντέινερ με το αναγνωριστικό tut
Ακολουθεί το χρονόμετρο μας

Αριστερά:


ΗμέρεςΏρεςΛεπτάΔευτερόλεπτα






Επισημοποιούμε
#στρώμα(
πλάτος: 600 px;
text-align:center;
περιθώριο: 0 αυτόματο;)

#μετρητής(
περιθώριο: 10 pt auto 0 auto;
πλάτος: 414 px;)

Περιγραφή(
πλάτος: 430 px;
περιθώριο: 0 px αυτόματα;)

#ημέρες,#ώρες,#λεπτά,#δευτερόλεπτα(
float:αριστερά;
γραμματοσειρά: 13px Arial,Verdana,sans-serif;
πλάτος: 50 px;
margin-right:63px;
font-weight:bold;
χρώμα:#000;)

#seconds(margin-right:0px;)

CntSeparator(
μέγεθος γραμματοσειράς: 50 px;
περιθώριο: 6 px 7 px;
χρώμα:#000;)
Επιλογή 3.
Κατά τη γνώμη μας το πιο βολικό. Όπως και το προηγούμενο, δείχνει τον υπόλοιπο αριθμό ημερών, ωρών, λεπτών, δευτερολέπτων. Δεν χρησιμοποιεί εικόνα για την εμφάνιση του μετρητή.
Για να δουλέψουμε χρειαζόμαστε τη βιβλιοθήκη jquery και το αρχείο

Σχεδιάζοντας τη σελίδα


Χρονόμετρο αντίστροφης μέτρησης

// εδώ είναι η επιθυμητή ημερομηνία με τη μορφή εεεε-μμ-ηη ωω:λλ:δδ
var deadline="2017-08-20 00:00:00";

• 
  00
  ημέρες
  


• 
  00
  ρολόι
  


• 
  00
  ελάχ
  


• 
  00
  δευτ
  

$(".countdown").downCount((
ημερομηνία: προθεσμία
},
λειτουργία())(
/* ενέργεια μετά τη λήξη του χρονοδιακόπτη */
alert ("Ο χρόνος έληξε!");
});


Και css για styling εμφάνιση
.αντίστροφη μέτρηση(
list-style:none;
περιθώριο: 6 px 0 0 0;
padding:0;
οθόνη: μπλοκ;)

Αντίστροφη μέτρηση li (εμφάνιση: inline-block;)

/* εδώ είναι ημέρες, ώρες, λεπτά, δευτερόλεπτα */
.αντίστροφη μέτρηση li span(
πλάτος:100%;
color:#000;
γραμματοσειρά:18px Verdana;
οθόνη: inline-block;)

/* διαχωριστικά. Και: */
.countdown li.seperator (
color:#000;
γραμματοσειρά:16px Verdana;
κατακόρυφη στοίχιση:πάνω;)

Αντίστροφη μέτρηση li div(
περιθώριο: 0;
χρώμα: #a7abb1;
γραμματοσειρά: 8pt Verdana;)

Ένα χρονόμετρο Tabata μπορεί να αγοραστεί σε ένα κατάστημα ως ξεχωριστή συσκευή, να χρησιμοποιηθεί στο διαδίκτυο ή να εγκατασταθεί ως εφαρμογή σε smartphone (για παράδειγμα, για Android, για iPhone). Online έκδοσηΕίναι βολικό γιατί δεν χρειάζεται να εγκαταστήσετε τίποτα, όλα είναι απλά και ξεκάθαρα.

Πώς να χρησιμοποιήσετε το χρονόμετρο διαστήματος:

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

Προετοιμασία - προεπιλογή 10 δευτ. Αυτός είναι ο χρόνος που χρειάζεται για να απομακρυνθείτε από τον υπολογιστή και να προετοιμαστείτε για την προπόνησή σας.

Εργασία - η προεπιλογή είναι 20 δευτερόλεπτα. Αυτή είναι η ώρα να κάνετε τις ασκήσεις.

Ξεκούραση - προεπιλογή 10 δευτ. Αυτός είναι ο χρόνος ανάπαυσης μεταξύ των γύρων.

Γύροι - η προεπιλογή είναι 8. Αυτός είναι ο αριθμός των προσεγγίσεων (εργασία + ανάπαυση).

Κύκλοι - η προεπιλογή είναι 1. Αυτός είναι ο αριθμός των γύρων των 8 γύρων. Με την πάροδο του χρόνου, αυξήστε τους σε 3-4 κύκλους. Μεταξύ των κύκλων, συνήθως ξεκουράζεστε για 1 λεπτό. Ο χρόνος ανάπαυσης μεταξύ των κύκλων ορίζεται στο στοιχείο «Προετοιμασία».

Έκδοση βίντεο του χρονοδιακόπτη διαστήματος με μουσική:

Το πιο απλό και βολικό χρονόμετρο αντίστροφης μέτρησης

Αντίστροφη μέτρηση HTML Ρολόι Ημέρες Ώρες Λεπτά Δευτερόλεπτα Σώμα CSS( στοίχιση κειμένου: κέντρο; φόντο: #00ecb9; οικογένεια γραμματοσειράς: sans-serif; βάρος γραμματοσειράς: 100; ) .countdown-title ( χρώμα: #396; βάρος γραμματοσειράς: 100; μέγεθος γραμματοσειράς: 40 εικονοστοιχεία, περιθώριο : 40 εικονοστοιχεία 0 εικονοστοιχεία 20 εικονοστοιχεία; αριθμός ( padding: 10px; border-radius: 3px; background: #00bf96; display: inline-block; ) .countdown-time ( padding: 15px; border-radius: 3px; background: #00816a; display: inline-block; ). var seconds = Math.floor((t / 1000) % 60 var minutes = Math.floor ((t / 1000 / 60) % 60 var hours = Math.floor((t / (1000 * 60 * 60); ) )) % 24 var days = Math.floor(t / (1000 * 60 * 60 * 24) return ( "σύνολο": t, "ημέρες": ημέρες, "ώρες": ώρες, "λεπτά"); : λεπτά, "δευτερόλεπτα": δευτερόλεπτα ); ) συνάρτηση startizeClock(id, endtime) ( var clock = document.getElementById(id); var daysSpan = clock.querySelector("days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = ρολόι. querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds"); + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2)Span.innerHTML = ("0" + t.seconds). ) εάν (t.total proTimer (πληρωμένο)

Γεννήτρια χρονοδιακόπτη αντίστροφης μέτρησης επί πληρωμή. Κόστος: 48 RUR/μήνα για 1 χρονόμετρο ή 199 RUR/μήνα για οποιονδήποτε αριθμό χρονομέτρων.

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