JavaScriptで年、月、日を平行にする方法-フロントエンドQ&A-php.cn

JavaScriptで年、月、日を平行にする方法

PHPz

リリース： 2023-04-24 14:59:08

オリジナル

384 人が閲覧しました

JavaScript は、一般的に使用される Web フロントエンド開発言語です。一般的な要件の 1 つは、Web ページ上に年、月、日の 3 つの情報を同時に表示することであり、これら 3 つの情報は並列形式である必要があります。これは、ニュース記事の公開時間やプロフィールページの誕生日情報など、Web デザインでは非常に一般的です。では、JavaScript ではどのようにしてそのような要件を達成できるのでしょうか?

1. アイデア

年、月、日の並列化を実現するには多くの方法がありますが、著者はここで比較的単純なアイデアを紹介します:

1. まず現在のシステムを入手します。時間。

2. 時刻情報をフォーマットします (たとえば、年、月、日をそれぞれ変数に格納します)。

3. 取得した年月日の情報をHTMLで並列表示します。

2. コードの実装

1. 現在のシステム時刻を取得する

現在のシステム時刻を取得するには、JavaScript で Date() オブジェクトを使用できます。

var today = new Date();

ログイン後にコピー

2. 時刻情報のフォーマット

システム時刻を取得した後、年、月、日をそれぞれ変数に格納する必要があります。ここでは、次のように、Date() オブジェクトのメソッドを使用して年、月、日の情報を取得し、それを配列に格納します。

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

ログイン後にコピー

上記のコードでは、getFull Year() メソッドは次の情報を取得します。完全な年情報の場合、getMonth() メソッドは 0 からカウントを開始するため、1 ずつ加算する必要があります。

3. 年月日情報の並列表示

HTMLのtableタグを使用して表を作成し、各行に年月日情報を表示することができます。コードは次のとおりです。

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

ログイン後にコピー

次に、JavaScript コードを使用して、年、月、日の情報を対応する td タグに入力します。コードは次のとおりです。

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

ログイン後にコピー

3. コード全体

<!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. まとめ

上記のアイデアを使用すると、年、月、日の並列表示を簡単に実現できます。。実際のプロジェクトでは、CSS スタイルを使用してテーブルのレイアウトを美しくし、テーブルをより美しく読みやすくすることもできます。これにより、より多くのカスタマイズオプションも提供されます。

以上がJavaScriptで年、月、日を平行にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。