So machen Sie Jahr, Monat und Tag in JavaScript parallel-Front-End-Fragen und Antworten-php.cn

So machen Sie Jahr, Monat und Tag in JavaScript parallel

PHPz

Freigeben： 2023-04-24 14:59:08

Original

477 Leute haben es durchsucht

Javascript ist eine häufig verwendete Web-Frontend-Entwicklungssprache. Eine der häufigsten Anforderungen besteht darin, drei Informationen: Jahr, Monat und Tag gleichzeitig auf der Webseite anzuzeigen, und diese drei Informationen müssen in paralleler Form vorliegen. Dies kommt im Webdesign sehr häufig vor, etwa bei der Veröffentlichungszeit von Nachrichtenartikeln, Geburtstagsinformationen auf Profilseiten usw. Wie können wir also eine solche Anforderung in Javascript erreichen?

1. Idee

Es gibt viele Möglichkeiten, die Parallelität von Jahr, Monat und Tag zu erreichen. Der Autor stellt hier eine relativ einfache Idee vor:

2. Formatieren Sie die Zeitinformationen, indem Sie beispielsweise Jahr, Monat und Tag jeweils in einer Variablen speichern.

3. Zeigen Sie die erhaltenen Jahres-, Monats- und Tagesinformationen parallel über HTML an.

2. Code-Implementierung

Um die aktuelle Systemzeit zu erhalten, können Sie das Date()-Objekt in Javascript verwenden:

var today = new Date();

Nach dem Login kopieren

Nachdem wir die Systemzeit erhalten haben, müssen wir das Jahr, den Monat und den Tag jeweils in Variablen speichern. Hier verwenden wir die Methode im Date()-Objekt, um die Informationen zu Jahr, Monat und Tag abzurufen, und speichern sie dann wie folgt in einem Array:

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

Nach dem Login kopieren

Im obigen Code ruft die Methode getFullYear() die vollständigen Jahresinformationen ab , und die Methode getMonth() erhält: Der Monat beginnt bei 0 zu zählen, daher muss er um 1 addiert werden.

3. Zeigen Sie die Jahres-, Monats- und Tagesinformationen parallel an

Wir können das Tabellen-Tag von HTML verwenden, um eine Tabelle zu erstellen und dann die Jahres-, Monats- und Tagesinformationen in jeder Zeile anzuzeigen. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Als nächstes verwenden wir Javascript-Code, um die Jahres-, Monats- und Tagesinformationen in das entsprechende td-Tag einzufügen. Der Code lautet wie folgt:

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

Nach dem Login kopieren

3. Vollständiger Code

<!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>

Nach dem Login kopieren

4. Zusammenfassung

Mit den oben genannten Ideen können wir leicht eine parallele Anzeige von Jahr, Monat und Tag erreichen. In tatsächlichen Projekten können wir das Layout der Tabelle auch durch CSS-Stile verschönern, um sie schöner und leichter lesbar zu machen. Dadurch erhalten wir auch mehr Anpassungsmöglichkeiten.

Das obige ist der detaillierte Inhalt vonSo machen Sie Jahr, Monat und Tag in JavaScript parallel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!