Comment implémenter le formatage de l'affichage de l'heure de Stack Exchange en JavaScript ?

Formatage du temps depuis : réplication de l'affichage de l'heure de Stack Exchange

La nécessité d'afficher le temps écoulé depuis un moment donné est courante dans les applications Web . De nombreux sites Web populaires, tels que Stack Exchange, utilisent un format concis et informatif pour afficher l'heure écoulée depuis, comme « il y a 4 minutes » ou « il y a 1 an ». La mise en œuvre d'une méthode de formatage similaire dans JavaScript permet aux développeurs de fournir un moyen convivial et intuitif de référencer des événements passés.

Pour y parvenir, nous pouvons exploiter l'objet Date intégré de JavaScript et un calcul simple pour déterminer le temps écoulé. le temps entre deux dates.

Mise en œuvre :

function timeSince(date) {
  var seconds = Math.floor((new Date() - date) / 1000);

  var interval = seconds / 31536000;

  if (interval > 1) {
    return Math.floor(interval) + " years";
  }
  interval = seconds / 2592000;
  if (interval > 1) {
    return Math.floor(interval) + " months";
  }
  interval = seconds / 86400;
  if (interval > 1) {
    return Math.floor(interval) + " days";
  }
  interval = seconds / 3600;
  if (interval > 1) {
    return Math.floor(interval) + " hours";
  }
  interval = seconds / 60;
  if (interval > 1) {
    return Math.floor(interval) + " minutes";
  }
  return Math.floor(seconds) + " seconds";
}

Utilisation :

var aDay = 24 * 60 * 60 * 1000;
console.log(timeSince(new Date(Date.now() - aDay))); // "1 day ago"
console.log(timeSince(new Date(Date.now() - aDay * 2))); // "2 days ago"

Cette fonction calcule la différence entre le courant l'heure et une date donnée, puis la formate sous forme de chaîne en fonction du temps écoulé, allant de quelques secondes à plusieurs années. La fonction fonctionne en divisant le temps écoulé par différents intervalles et en arrondissant le résultat à l'entier le plus proche.

En mettant en œuvre cette méthode, les développeurs peuvent facilement afficher le temps écoulé dans un format cohérent et convivial, améliorant ainsi l'expérience utilisateur. de leurs applications web.

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!