ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScriptで年、月、日を平行にする方法

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

PHPz
リリース: 2023-04-24 14:59:08
オリジナル
438 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート