Comment rendre l'année, le mois et le jour parallèles en JavaScript-Questions et réponses frontales-php.cn

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

PHPz

Libérer： 2023-04-24 14:59:08

original

384 Les gens l'ont consulté

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();

Copier après la connexion

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());

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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!