Maison > interface Web > js tutoriel > Obtenez la différence d'horodatage relative entre les dates en JavaScript

Obtenez la différence d'horodatage relative entre les dates en JavaScript

WBOY
Libérer: 2023-08-31 15:05:10
avant
1434 Les gens l'ont consulté

在 JavaScript 中获取日期之间的相对时间戳差异

Avez-vous déjà vu des notifications affichant des horodatages sur un site Web ? Il affiche des éléments tels que « il y a 12 minutes », « il y a 2 jours », « il y a 10 heures », etc. Cela concerne la différence d’horodatage entre deux dates ou heures.

De plus, certaines applications indiquent que l'appareil a été connecté pour la dernière fois il y a 22 heures. Ainsi, obtenir la différence d’horodatage entre deux dates a de nombreuses utilisations.

Dans ce tutoriel, nous apprendrons différentes manières d'obtenir la différence d'horodatage relative entre deux dates.

Utilisez la méthode getTime() avec la date et créez un algorithme personnalisé

En JavaScript, nous pouvons utiliser le constructeur new Date() pour créer un objet date. De plus, nous pouvons transmettre une date spécifique comme argument au constructeur Date() pour initialiser un objet date avec cette valeur de date.

La méthode

getTime() renvoie le nombre total de secondes depuis le 1er janvier 1970. Nous pouvons donc trouver le total en millisecondes des deux dates, puis les soustraire pour obtenir la différence en millisecondes. En utilisant cette milliseconde, nous pouvons trouver la différence d’horodatage en secondes, minutes, années, etc.

Grammaire

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour obtenir la différence d'horodatage relative entre deux dates.

let second_diff = (current_date.getTime() - previous_date.getTime())/1000; 
Copier après la connexion

Dans la syntaxe ci-dessus, current_date et previous_date sont deux dates différentes. Nous utilisons la méthode getTime() pour obtenir la différence en millisecondes entre deux dates.

Remarque- Vous pouvez obtenir la différence d'horodatage relatif en comparant la valeur de la variable second_diff avec les millisecondes.

Étapes

Les utilisateurs peuvent suivre les étapes ci-dessous pour rechercher des horodatages relatifs entre deux dates dans des unités différentes (telles que jours, mois, années, etc.).

Étape 1 - Créez deux dates différentes.

Étape 2 - Utilisez la méthode getTime() pour obtenir le total en millisecondes de deux dates et obtenir la différence entre elles. De plus, divisez la différence en millisecondes par 1 000 pour la convertir en secondes et stockez-la dans la variable secondaire_diff.

Étape 3 - Maintenant, utilisez l'instruction conditionnelle if-else pour trouver les différences d'horodatage relatives.

Étape 4 - Si la valeur de second_diff est inférieure à 60, alors la différence est en secondes. Second_diff a une valeur comprise entre 60 et 3600, avec la différence en heures. Les utilisateurs peuvent également calculer les jours, les mois et les années de cette manière.

Exemple

Dans l'exemple ci-dessous, nous avons créé deux objets date différents à l'aide du constructeur Date et utilisé les étapes ci-dessus pour trouver l'horodatage relatif entre les deux dates.

Dans la sortie, l'utilisateur peut observer la différence d'horodatage des mois représentée par le code suivant.

<html>
<body>
   <h3>Getting the relative timestamp difference between two dates using the <i> custom algorithm </i></h3>
   <p id="output"></p>
   <script>
      let output = document.getElementById("output");
      
      // creating the current date
      let current_date = new Date();
      
      // previous date
      let previous_date = new Date("jan 14, 2022 12:21:45");
      
      // finding the difference in total seconds between two dates
      let second_diff = (current_date.getTime() - previous_date.getTime()) / 1000;
      output.innerHTML += "The first date is " + current_date + "</br>";
      output.innerHTML += "The second date is " + previous_date + "</br>";
      
      // showing the relative timestamp.
      if (second_diff < 60) {
         output.innerHTML += "difference is of " + second_diff + " seconds.";
      } else if (second_diff < 3600) {
         output.innerHTML += "difference is of " + second_diff / 60 + " minutes.";
      } else if (second_diff < 86400) {
         output.innerHTML += "difference is of " + second_diff / 3600 + " hours.";
      } else if (second_diff < 2620800) {
         output.innerHTML += "difference is of " + second_diff / 86400 + " days.";
      } else if (second_diff < 31449600) {
         output.innerHTML += "difference is of " + second_diff / 2620800 + " months.";
      } else {
         output.innerHTML += "difference is of " + second_diff / 31449600 + " years.";
      }
   </script>
</body>
</html>
Copier après la connexion

Utilisez l'API RelativeTimeFormat() d'Intl

Intl fait référence à l'API d'internationalisation. Il contient diverses méthodes de formatage de la date et de l'heure. Nous pouvons utiliser la méthode RelativeTimeFormat() de l'objet Intl pour obtenir l'horodatage relatif entre deux dates.

Grammaire

Les utilisateurs peuvent utiliser l'API RelativeTimeFormat() selon la syntaxe suivante pour obtenir l'horodatage relatif entre deux dates.

var relativeTimeStamp =
new Intl.RelativeTimeFormat("en", { numeric: "auto",});

// compare the value of RelativeTimeStamp with milliseconds of different time units
Copier après la connexion

Dans la syntaxe ci-dessus, la méthode RelativeTimeFormat() renvoie la différence d'horodatage. time_Stamp_unit est un objet contenant différentes unités de temps et leur nombre total de millisecondes.

Étapes

Étape 1 - Créez un objet unités contenant l'unité de temps comme clé et le nombre total de millisecondes comme valeur pour cette unité de temps.

Étape 2 - Obtenez le décalage horaire (en millisecondes) entre deux dates.

Étape 3 - Utilisez maintenant une boucle for-in pour parcourir l'objet time_stamp_unit et vérifiez si la valeur de second_diff est supérieure au nombre total de millisecondes d'une heure spécifique ; utilisez la méthode de format de RelativeTimeFormat() ; API pour formater l'horodatage de cette unité spécifique.

Étape 4 - Après cela, rompez la boucle for.

Exemple

Dans l'exemple ci-dessous, nous utilisons la méthode RelativeTimeFomrat() pour obtenir la différence d'horodatage relatif entre deux dates comme décrit dans la syntaxe et les étapes ci-dessus.

<html>
<body>
   <h3>Getting the relative timestamp difference between two dates using the <i> RelativeTimeFormat() </i> method </h3>
   <p id="output"></p>
   <script>
      let output = document.getElementById("output");
      let current_date = new Date();
      let previous_date = new Date("jan 14, 2022 12:21:45");
      
      // finding the difference in total seconds between two dates 
      let second_diff = current_date.getTime() - previous_date.getTime();
      output.innerHTML += "The first date is " + current_date + "</br>";
      output.innerHTML += "The second date is " + previous_date + "</br>";
      var time_Stamp_unit = {
         year: 31536000000,
         month: 31536000000 / 12,
         day: 86400000,
         hour: 3600000,
         minute: 60000,
         second: 1000,
      };
      var relativeTimeStamp = new Intl.RelativeTimeFormat("en", {
         numeric: "auto",
      });
      
      // iterate through all time stamps
      for (var ele in time_Stamp_unit) {
         
         // if second_diff's value is greater than particular timesapm unit's total millisecond value, format accordingly
         if (Math.abs(second_diff) > time_Stamp_unit[ele] || ele == "second") {
            output.innerHTML += "The difference between two dates is " + relativeTimeStamp.format(
               Math.round(second_diff / time_Stamp_unit[ele]), ele
            );
            break;
         }
      }
   </script>
</body>
</html>
Copier après la connexion

Les utilisateurs ont appris à trouver des horodatages relatifs entre deux dates à l'aide des instructions if-else et de la méthode format() de l'API RelativeTimeFormat() . Les utilisateurs peuvent utiliser les deux méthodes en fonction de leurs besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal