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

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

WBOYavant: 2023-08-31 15:05:101409parcourir

在 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;

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>

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

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>

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!

JavaScript if for 构造函数 date format 循环对象算法

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment faire réagir un objet polygone aux événements de la souris à l'aide de FabricJS ?Article suivant：Comment faire réagir un objet polygone aux événements de la souris à l'aide de FabricJS ?

Articles Liés

Voir plus