Il est courant de présenter les dates sur le Web dans un format tel que publié le 12 septembre 2015 ou le 09/12/2015, 09:41:23 et 2015-09-12.
Chacun de ces exemples indique la date complète et / ou l'heure d'une sorte d'activité - que ce soit un article publié, ou un commentaire de lecteur, ou peut-être une vidéo téléchargée.
Les formats de date comme celui-ci peuvent sembler parfaitement raisonnables. Après tout, ils sont informatifs et lisibles par l'homme! Eh bien oui, mais «lisible par l'homme» n'est pas nécessaire que les utilisateurs soient nécessaires pour comprendre à quel point l'activité s'est produite récemment. Le Web est un endroit rapide, et donner à votre contenu un sentiment de fraîcheur pourrait être la clé pour s'engager avec votre public! Voyons donc comment nous pourrions améliorer ces formats de date courants.
Encore une fois, disons que vous avez trébuché sur un article qui a été publié il y a quelques minutes, mais la sous-position du post indique ceci:
publié le 12 septembre 2016
… ou ceci:
Publié le 2016-09-12, 09:41:23
Le problème avec ces messages est qu'ils ne communiquent pas le sentiment que votre site Web vient d'être mis à jour ou que vous le faites très souvent. Donc, c'est sûrement plus invitant - et beaucoup plus clair - à présenter le temps de cette façon:
publié il y a 2 minutes
Vous avez vu cela plusieurs fois auparavant? Mais combien d'entre vous ont construit cela dans vos projets? Prenez Facebook par exemple: à quoi cela ressemblerait-il s'ils présentaient les dates du dernier contenu comme dans mon premier exemple? Comparez les colonnes gauche et droite dans l'image suivante:
Les dates de la colonne de gauche ne sont pas si attrayantes, n'est-ce pas? Je parierai que les exemples de droite vous sont plus attrayants. Savoir que le contenu est frais est très important - en particulier sur les réseaux sociaux, où les gens sont plus susceptibles d'ignorer le contenu vieux ou non clairement horodomagistique.
Afin de présenter de meilleures dates , vous aurez besoin de scripts côté serveur et j'utiliserai PHP pour cette démo. J'ai créé une petite fonction appelée time_ago (), comme indiqué ici:
<span><span><?php
</span></span><span>
</span><span> <span>define( TIMEBEFORE_NOW, 'now' );
</span></span><span> <span>define( TIMEBEFORE_MINUTE, '{num} minute ago' );
</span></span><span> <span>define( TIMEBEFORE_MINUTES, '{num} minutes ago' );
</span></span><span> <span>define( TIMEBEFORE_HOUR, '{num} hour ago' );
</span></span><span> <span>define( TIMEBEFORE_HOURS, '{num} hours ago' );
</span></span><span> <span>define( TIMEBEFORE_YESTERDAY, 'yesterday' );
</span></span><span> <span>define( TIMEBEFORE_FORMAT, '%e %b' );
</span></span><span> <span>define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' );
</span></span><span>
</span><span> <span>function time_ago( $time )
</span></span><span> <span>{
</span></span><span> <span>$out = ''; // what we will print out
</span></span><span> <span>$now = time(); // current time
</span></span><span> <span>$diff = $now - $time; // difference between the current and the provided dates
</span></span><span>
</span><span> <span>if( $diff < 60 ) // it happened now
</span></span><span> <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span> <span>elseif( $diff < 3600 ) // it happened X minutes ago
</span></span><span> <span>return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES );
</span></span><span>
</span><span> <span>elseif( $diff < 3600 * 24 ) // it happened X hours ago
</span></span><span> <span>return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS );
</span></span><span>
</span><span> <span>elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday
</span></span><span> <span>return TIMEBEFORE_YESTERDAY;
</span></span><span>
</span><span> <span>else // falling back on a usual date format as it happened later than yesterday
</span></span><span> <span>return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time );
</span></span><span> <span>}
</span></span><span>
</span><span><span>?></span></span>Regardons quelques détails de ce code.
Donc, par exemple, si vous voulez obtenir ceci sur votre site WordPress, vous écririez simplement ceci:
<span><span><?=time_ago( get_the_time( 'U' ) )?></span></span>
ou si c'était un autre CMS hypothétique:
<?=time_ago( $post->date_created )?>
ou la manière statique:
<?=time_ago( 1447571705 )?>
Il y a un élément HTML spécifique que vous devez utiliser pour présenter les dates:
Published <time
datetime="<?=date( 'Y-m-d', $time )?>"
title="<?=strftime( date( 'Y', $time ) ==
date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time )?>">
<?=time_ago( $time )?>
</time>Cela entraînerait une meilleure accessibilité, par exemple:
Published <time datetime="2015-09-12" title="September 12">3 minutes ago</time>
Avez-vous repéré l'attribut [titre]? C’est une minuscule amélioration de l’utilisabilité: mettre le texte du curseur sur la date montre un message présenté dans l’attribut de titre. C'est pour les utilisateurs qui, pour une raison quelconque, cherchaient les «vraies» dates. Voici une petite astuce CSS pour renforcer le sentiment qu'il y a quelque chose de plus:
<span>time<span><span>[title]</span></span>
</span><span>{
</span> <span>cursor: help;
</span><span>}</span> 
Il y a encore une chose que nous pouvons faire! Avez-vous remarqué que Facebook augmente également les dates en temps réel? Il suffit de regarder à 3 minutes pendant une minute et il se transformera en 4 minutes et ainsi de suite. Donc, il existe des types de sites Web que cela fonctionne comme une très belle amélioration. Il ne serait pas utile sur un article d'article comme celui-ci, mais il est parfait sur un site comme ReadERRR:
<span><span><?php
</span></span><span>
</span><span> <span>define( TIMEBEFORE_NOW, 'now' );
</span></span><span> <span>define( TIMEBEFORE_MINUTE, '{num} minute ago' );
</span></span><span> <span>define( TIMEBEFORE_MINUTES, '{num} minutes ago' );
</span></span><span> <span>define( TIMEBEFORE_HOUR, '{num} hour ago' );
</span></span><span> <span>define( TIMEBEFORE_HOURS, '{num} hours ago' );
</span></span><span> <span>define( TIMEBEFORE_YESTERDAY, 'yesterday' );
</span></span><span> <span>define( TIMEBEFORE_FORMAT, '%e %b' );
</span></span><span> <span>define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' );
</span></span><span>
</span><span> <span>function time_ago( $time )
</span></span><span> <span>{
</span></span><span> <span>$out = ''; // what we will print out
</span></span><span> <span>$now = time(); // current time
</span></span><span> <span>$diff = $now - $time; // difference between the current and the provided dates
</span></span><span>
</span><span> <span>if( $diff < 60 ) // it happened now
</span></span><span> <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span> <span>elseif( $diff < 3600 ) // it happened X minutes ago
</span></span><span> <span>return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES );
</span></span><span>
</span><span> <span>elseif( $diff < 3600 * 24 ) // it happened X hours ago
</span></span><span> <span>return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS );
</span></span><span>
</span><span> <span>elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday
</span></span><span> <span>return TIMEBEFORE_YESTERDAY;
</span></span><span>
</span><span> <span>else // falling back on a usual date format as it happened later than yesterday
</span></span><span> <span>return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time );
</span></span><span> <span>}
</span></span><span>
</span><span><span>?></span></span>Enfin, nous devons convertir le code PHP en un équivalent JavaScript. Je l'ai fait pour vous dans Vanilla JS (bien qu'une version jQuery soit également disponible). Le script traverse chaque fois l'élément [de données] une fois à chaque minute (setTimeout (Updatedates, 1000 * 60)) et met à jour les valeurs:
<span><span><?=time_ago( get_the_time( 'U' ) )?></span></span>
Vous pouvez consulter une démo en ligne du code ci-dessus ou télécharger le code de démonstration complet.
Dans les exemples ci-dessus, la date complète est présentée si l'activité s'est produite il y a trois jours ou plus. Mais il est assez facile d'étendre le script pour présenter le temps de la manière il y a 5 jours, il y a 2 semaines et 1 mois, etc.:
<?=time_ago( $post->date_created )?>
L'expérience utilisateur et la satisfaction sont en détail. Parfois, un détail simple - comme un format de date dynamique - est suffisant pour améliorer un peu nos sites Web.
Alors, que pensez-vous de cette solution? Envisageriez-vous de l'utiliser sur votre prochain projet? Avez-vous des questions à ce sujet? S'il vous plaît laissez-moi savoir dans les commentaires.
Soit dit en passant, j'espère que quelqu'un pourra dire aux gens à Instagram que 122W n'est pas cool et que 2,4 ans seraient beaucoup plus faciles à comprendre. Ce serait mieux, n'est-ce pas?
La fonction temporelle «il y a» en JavaScript est un moyen d'afficher le temps écoulé depuis qu'un événement particulier s'est produit. Il utilise l'objet date pour calculer la différence entre l'heure actuelle et l'heure de l'événement. Cette différence est ensuite convertie en secondes, minutes, heures, jours, semaines ou années, selon l'ampleur de la différence. Le résultat est une chaîne qui représente le temps écoulé dans un format lisible par l'homme, tel que «il y a 5 minutes» ou «il y a 2 jours».
Pour implémenter la fonction de temps «Ago» dans votre application Web, vous devez créer une fonction JavaScript qui prend un objet Date en entrée et renvoie une chaîne représentant l'heure écoulée. Cette fonction doit calculer la différence entre l'heure actuelle et la date d'entrée, convertir cette différence en unités appropriées et formater le résultat en tant que chaîne. Vous pouvez ensuite appeler cette fonction chaque fois que vous avez besoin d'afficher le temps «il y a».
La fonction temporelle «il y a» fournit une façon plus intuitive et conviviale d'afficher des informations de temps. Au lieu de montrer la date et l'heure exactes d'un événement, qui peut être difficile à interpréter et à comparer, la fonction de temps «il y a» montre le temps écoulé dans un format facile à comprendre et à comprendre. Cela peut améliorer l'expérience utilisateur et rendre votre application Web plus attrayante et interactive.
Oui, la fonction temporelle «il y a» peut gérer l'avenir dates. Si la date d'entrée est ultérieure que la date actuelle, la fonction calculera l'heure jusqu'à l'événement au lieu de l'heure qui a suivi l'événement. Le résultat sera une chaîne qui représente le temps restant dans un format lisible par l'homme, comme «en 5 minutes» ou «en 2 jours».
La fonction temporelle «Ago» est hautement personnalisable. Vous pouvez modifier la fonction pour utiliser différentes unités de temps, différents formats pour la chaîne de sortie ou différentes règles pour arrondir le temps écoulé. Vous pouvez également ajouter une prise en charge de différentes langues ou lieux, si nécessaire. En peaufinant la fonction, vous pouvez le faire s'adapter parfaitement à la conception et aux fonctionnalités de votre application Web.
L'heure «il y a» La fonction est basée sur des fonctionnalités JavaScript standard, il doit donc être compatible avec tous les navigateurs Web modernes. Cependant, c'est toujours une bonne idée de tester votre code sur différents navigateurs et plates-formes pour s'assurer qu'il fonctionne correctement et de manière cohérente.
Oui, oui, La fonction temporelle «Ago» peut gérer les fuseaux horaires. La fonction utilise l'objet Date, qui prend automatiquement en compte le fuseau horaire de l'appareil de l'utilisateur. Cela signifie que le temps «il y a» sera précis, indépendamment de l'emplacement ou du fuseau horaire de l'utilisateur.
Si le La fonction du temps «il y a» ne fonctionne pas correctement, vous pouvez utiliser la méthode console.log () pour imprimer la date d'entrée, la date en cours et la différence calculée. Cela vous aidera à identifier les erreurs ou les incohérences de la fonction. Vous pouvez également utiliser l'outil de débogueur dans les outils de développeur de votre navigateur pour parcourir la fonction et inspecter son comportement en détail.
Oui, vous pouvez utiliser la fonction temporelle «Ago» dans une application mobile. JavaScript est un langage polyvalent qui peut être utilisé dans de nombreux environnements différents, y compris les applications mobiles. La fonction doit fonctionner de la même manière dans une application mobile que dans une application Web.
Pour optimiser les performances de la fonction temporelle «il y a», vous pouvez utiliser des techniques telles que la mémorisation ou la mise en cache. Ces techniques peuvent réduire le nombre de calculs que la fonction doit effectuer, le rendant plus rapide et plus efficace. Vous pouvez également minimiser le nombre de fois où la fonction est appelée en mettant à jour le temps «il y a» uniquement lorsque cela est nécessaire, plutôt que sur chaque page de charge ou chaque seconde.
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!
L'ordinateur indique que msvcr110.dll est manquant et comment le résoudre
Quelle est la priorité de l'interruption ?
Quels sont les quatre outils d'analyse du Big Data ?
Que sont les bases de données en mémoire ?
Comment utiliser la fonction valeur
album photo dynamique
Ordre d'apprentissage recommandé pour C++ et Python
Classement des dix principaux échanges de devises numériques
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
