Maison > Article > interface Web > Comment rendre l'année, le mois et le jour parallèles en JavaScript

Comment rendre l'année, le mois et le jour parallèles en JavaScript

PHPzoriginal: 2023-04-24 14:45:58386parcourir

Javascript est un langage de développement front-end Web couramment utilisé. L’une des exigences courantes est d’afficher simultanément trois informations : l’année, le mois et le jour sur la page Web, et ces trois informations doivent être sous forme parallèle. Ceci est très courant dans la conception de sites Web, comme l'heure de publication des articles d'actualité, les informations d'anniversaire sur les pages de profil, etc. Alors, comment pouvons-nous répondre à une telle exigence en Javascript ?

1. Idée

Il existe de nombreuses façons d'obtenir le parallélisme de l'année, du mois et du jour. L'auteur présente ici une idée relativement simple :

1. Obtenez d'abord l'heure actuelle du système.

2. Formatez les informations temporelles, par exemple en stockant respectivement l'année, le mois et le jour dans une variable.

3. Affichez les informations obtenues sur l'année, le mois et le jour en parallèle via HTML.

2. Implémentation du code

1. Obtenez l'heure actuelle du système

Pour obtenir l'heure actuelle du système, vous pouvez utiliser l'objet Date() en Javascript. Le code est le suivant :

var today = new Date();

Après avoir obtenu l'heure du système, nous devons stocker respectivement l'année, le mois et le jour dans des variables. Ici, nous utilisons la méthode dans l'objet Date() pour obtenir les informations sur l'année, le mois et le jour, puis les stockons dans un tableau, comme suit :

var dateArr = [];
dateArr.push(today.getFullYear());
dateArr.push(today.getMonth() + 1);
dateArr.push(today.getDate());

Dans le code ci-dessus, la méthode getFullYear() obtient les informations complètes sur l'année. , et la méthode getMonth() obtient Le mois commence à compter à partir de 0, il doit donc être ajouté par 1.

3. Afficher les informations sur l'année, le mois et le jour en parallèle

Nous pouvons utiliser la balise table du HTML pour créer un tableau, puis afficher les informations sur l'année, le mois et le jour dans chaque ligne. Le code est le suivant :

<table>
  <tr>
    <td>年：</td>
    <td id="year"></td>
  </tr>
  <tr>
    <td>月：</td>
    <td id="month"></td>
  </tr>
  <tr>
    <td>日：</td>
    <td id="date"></td>
  </tr>
</table>

Ensuite, nous utilisons le code Javascript pour remplir les informations sur l'année, le mois et le jour dans la balise td correspondante. Le code est le suivant :

document.getElementById("year").innerHTML = dateArr[0];
document.getElementById("month").innerHTML = dateArr[1];
document.getElementById("date").innerHTML = dateArr[2];

3. Code complet

<!DOCTYPE html>
<html>
<head>
  <title>年月日平行展示</title>
</head>
<body>
  <table>
    <tr>
      <td>年：</td>
      <td id="year"></td>
    </tr>
    <tr>
      <td>月：</td>
      <td id="month"></td>
    </tr>
    <tr>
      <td>日：</td>
      <td id="date"></td>
    </tr>
  </table>

  <script type="text/javascript">
    var today = new Date();
    var dateArr = [];
    dateArr.push(today.getFullYear());
    dateArr.push(today.getMonth() + 1);
    dateArr.push(today.getDate());

    document.getElementById("year").innerHTML = dateArr[0];
    document.getElementById("month").innerHTML = dateArr[1];
    document.getElementById("date").innerHTML = dateArr[2];
  </script>
</body>
</html>

4. Résumé

En utilisant les idées ci-dessus, nous pouvons facilement réaliser un affichage parallèle de l'année, du mois et du jour. Dans les projets réels, nous pouvons également utiliser des styles CSS pour embellir la disposition du tableau afin de le rendre plus beau et plus facile à lire. Cela nous donne également plus d'options de personnalisation.

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 css html date 对象 table td

Déclaration：

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

Article précédent：Quel est le jour de la semaine en javascript ?Article suivant：Quel est le jour de la semaine en javascript ?

Articles Liés

Voir plus