Maison > interface Web > Questions et réponses frontales > 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

PHPz
Libérer: 2023-04-24 14:59:08
original
439 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

2.

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal