Heim > Artikel > Web-Frontend > So machen Sie Jahr, Monat und Tag in JavaScript parallel

So machen Sie Jahr, Monat und Tag in JavaScript parallel

PHPzOriginal: 2023-04-24 14:45:58386Durchsuche

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

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

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>

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

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>

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!

JavaScript css html date 对象 table td

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist der Wochentag in Javascript?Nächster Artikel：Was ist der Wochentag in Javascript?

In Verbindung stehende Artikel

Mehr sehen