ホームページ > 記事 > ウェブフロントエンド > JavaScriptで年、月、日を平行にする方法
JavaScriptで年、月、日を平行にする方法
- PHPzオリジナル
- 2023-04-24 14:45:58417ブラウズ
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 サイトの他の関連記事を参照してください。