JavaScript Count Up Timer

Les minuteries jouent un grand rôle dans l'organisation de notre style de vie dans une large mesure. Par exemple, mesurer les intervalles de temps, garder une trace du temps écoulé et rester le temps en cas de race, de compétition, etc. Dans de tels cas, la mise en œuvre d'une minuterie de comptage s'avère être un outil efficace pour gérer ces types de scénarios pour la gestion du temps appropriée.

Comment implémenter un chronomètre à compter dans JavaScript?

Les approches suivantes peuvent être utilisées pour implémenter une minuterie de compte dans JavaScript:

• "setInterval ()" et "Mathématiques.sol()«Méthodes.
• "setInterval ()" et "parseInt ()«Méthodes.
• "jquery" Approche.

Dans la section ci-dessous, les approches mentionnées seront illustrées une par une!

Approche 1: Implémentez une minuterie de comptage en JavaScript à l'aide du setInterval () et des mathématiques.Méthodes de plancher ()

Le "setInterval ()«La méthode est appliquée pour définir un intervalle de temps spécifique sur une fonction spécifique à exécuter et le« «Mathématiques.sol()”La méthode renvoie la valeur entier plus la plus proche. Ces méthodes peuvent être implémentées pour appliquer un intervalle de temps à une fonction particulière et effectuer des calculs précis pour l'exécution appropriée de la minuterie.

Syntaxe

setInterval (fonction, millisecondes)

Dans la syntaxe ci-dessus:

• "fonction»Fait référence à la fonction sur laquelle l'intervalle de temps sera appliqué et«millisecondes»Porte l'intervalle de temps défini.

Le "Mathématiques.sol()"La méthode prend le"valeur«À formater comme son paramètre.

Exemple

Parcourez l'extrait de code suivant pour comprendre le concept déclaré:

00:00:00

Minuterie

Dans la démonstration ci-dessus,

• Spécifiez l'en-tête contenant le format de la minuterie de compte.
• Après cela, créez un bouton avec un "sur clic«Redirection des événements vers la fonction«ClearInterval ()"Méthode ayant la variable"minuteur»Passé comme paramètre qui contient le«setInterval ()" méthode. Cela entraînera la compensation de l'intervalle de temps défini sur le bouton cliquer.

Maintenant, passez par l'extrait de code JavaScript suivant:

var secondes = 0
var timer = setInterval (uptimer, 1000);
fonction uptimer ()
++secondes;
var heure = mathématiques.plancher (secondes / 3600);
var minute = mathématiques.plancher ((secondes - heure * 3600) / 60);
var updSecond = secondes - (heure * 3600 + minute * 60);
document.GetElementByid ("Coupup").innerHtml = hour + ":" + minute + ":" + updSecond;

Dans le code ci-dessus:

• Initialiser les secondes avec "0". Appliquez également la méthode setInterval () sur la fonction uptimer () avec un intervalle de temps de "1000”Millisecondes.
• Après cela, définissez une fonction nommée «uptimer ()". Dans sa définition, calculer le «heure"En le divisant par le nombre de secondes en une heure et en renvoyant la valeur entière vers le bas le plus proche en utilisant le"Mathématiques.sol()" méthode.
• De même, calculez les minutes en divisant la soustraction des deux (les secondes passées dans la minuterie et le nombre de secondes en une heure) par les minutes totales en une heure.
• Le calcul de l'incrémentation des secondes de la minuterie sera calculé dans la dernière étape.
• Toutes les approches ci-dessus peuvent être évidentes comme suit:

Travail de la minuterie:

Approche 2: Implémentez une minuterie de compte dans JavaScript à l'aide des méthodes SetInterval () et ParseInt ()

Le "setInterval ()«La méthode est également appliquée pour définir un intervalle de temps spécifique sur une fonction particulière à exécuter et le«parseInt ()»La méthode analyse une valeur en tant que chaîne et renvoie le premier entier. Ces méthodes peuvent être implémentées de telle sorte que la fonction s'exécute à un intervalle particulier et affiche le nombre de temporisations en analysant correctement les chiffres.

Syntaxe

setInterval (fonction, millisecondes)

Dans la syntaxe ci-dessus:

• "fonction»Fait référence à la fonction sur laquelle l'intervalle de temps sera appliqué et«millisecondes»Porte l'intervalle de temps défini.

ParseInt (String, Radix)

Dans la syntaxe donnée:

• "chaîne»Fait référence à la chaîne à analyser.
• "base" La valeur est "dix" par défaut

Exemple

La démonstration dirigée ci-dessous explique le concept déclaré:

Compter la minuterie pendant une heure

= "minutes"> minutes: = "secondes"> secondes

Dans le code HTML ci-dessus:

• Dans le «”Tag, spécifiez l'en-tête.
• Après cela, incluez le «”TAG pour accumuler la minuterie de comptage ici en ce qui concerne le formatage spécifié pour«minutes" et "secondes".

Maintenant, passez par l'extrait de code JS suivant:

var seconde = 0;
fonction uptimer (count) return count> 9 ? Count: "0" + Count;
setInterval (function ()
document.getElementByid ("secondes").innerHtml = uptimer (++ seconde% 60);
document.GetElementByid ("Minutes").innerHtml = uptimer (parseInt (deuxième / 60, 10));
, 1000);

Dans cette partie du code:

• Initialiser le "secondes"Avec 0.
• Après cela, définissez la fonction nommée «uptimer ()".
• Cette fonction ajoute un zéro leader et applique une vérification si la valeur qui lui est transmise est un seul chiffre I.e (<9). In such a case, it adds a leading zero.
• Le "setInterval ()«Méthode avec un intervalle défini de«1000»MS sera appliqué au code supplémentaire. Ici, le spécifié "portée»L'élément des secondes et des minutes sera accessible respectivement.
• Pour "secondes», Les secondes initialisées sont incrémentées et les 60 points à la limite finale pendant les secondes. Après cela, ils sont passés en tant que paramètre à la fonction uptimer () et affichés dans le DOM comme un temps de portée discuté avant.
• De même, dans le cas de «minutes», Calculez les minutes. Appliquez également le «parseInt ()»Méthode pour analyser les minutes. Le premier paramètre de la méthode indique la transition de la minute au second i.E 60. Le deuxième paramètre décrit dans la syntaxe est par défaut sur 10

L'exécution du code ci-dessus produira les résultats suivants sur le navigateur:

Il peut être observé à partir de la sortie que la minuterie de comptage fonctionne parfaitement.

Approche 3: Implémentez une minuterie de compte dans JavaScript en utilisant l'approche jQuery

Dans cette approche, jQuery peut être appliqué en utilisant ses méthodes pour effectuer l'exigence donnée.

Syntaxe

$ (sélecteur).html ()

Dans la syntaxe donnée:

• "sélecteur" se réfère à la "identifiant"Contre l'élément HTML.

Exemple

Les lignes de code suivantes expliquent le concept déclaré.

Comptez la minuterie pendant 30 minutes

= "minutes"> minutes: = "secondes"> secondes

Dans l'exemple donné ci-dessus,

• Tout d'abord, incluez le «jquery" bibliothèque.
• Maintenant, de même, répétez l'approche ci-dessus pour spécifier le «minutes" et "secondes" dans le "" étiqueter.

var seconde = 0;
fonction uptimer (count) return count> 9 ? Count: "0" + Count;
setInterval (function ()
$ ("# secondes").html (uptimer (++ seconde% 60));
$ ("# Minutes").html (uptimer (parseInt (second / 30, 10)));
, 1000);

Dans le code JS ci-dessus:

• De même, initialisez les secondes avec «0".
• Maintenant, déclarez une fonction nommée «uptimer ()".
• Dans sa définition, relancez les étapes pour appliquer un chèque sur le nombre de chiffres.
• De même, appliquez le «setInterval ()«Méthode avec un«1000”Intervalle de temps millisecondes sur la fonction spécifiée.
• Ici, appliquez la jQuery "html ()«Méthode pour renvoyer le contenu (innerhtml) des éléments en les qualifiant«secondes", et "minutes" respectivement.

Sortir

Dans cet article, toutes les approches pour créer une minuterie de compte sont illustrées.

Conclusion

La combinaison de «setInterval ()" et "Mathématiques.sol()«Méthodes, le«setInterval ()" et "parseInt ()"Méthodes ou"jquery»Une approche peut être utilisée pour implémenter un chronomètre à compter en utilisant JavaScript. Le setInterval () et les mathématiques.Les méthodes de plancher () peuvent être implémentées pour appliquer un intervalle de temps spécifique à une fonction particulière et effectuer des calculs précis pour l'exécution appropriée de la minuterie. Les méthodes setInterval () et ParseInt () peuvent être utilisées pour exécuter une fonction à des intervalles spécifiques à plusieurs reprises et afficher correctement le nombre de minuterie. L'approche jQuery peut être appliquée pour intégrer l'élément HTML et effectuer la fonctionnalité requise. Cet article a démontré à la mise en œuvre d'un chronomètre Count Up dans JavaScript.