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