知ってた？ナルホド！
こんにちは！コーダーの平原です！
MacのMojaveでは、時間と共に自由にデスクトップ画像を変化するダイナミックデスクトップ機能が搭載されています。
その機能と近しい機能がJavaScriptで作れないかと思い、10秒毎に背景色が切り替わるリアルタイム表示を、DateオブジェクトとsetIntervalで作ってみました。今回は、その作成内容をご紹介します！
1. 背景色が切り替わるリアルタイム表示
こちらが今回作成した、背景色が切り替わるリアルタイム表示です。
2. Dateオブジェクト
Dateオブジェクトでは、日付や時刻を扱うことができます。
現在日時を取得したり、過去や未来の日時を設定したり、日時の計算をすることができます。
Dateオブジェクトで日時の設定をする際は、以下のように初期化する必要があります。
const now = new Date(); //Dateオブジェクトの初期化この初期化(現在日時を記憶した)したDateオブジェクトを使用して、日時の出力や計算を行っていきます。
今回は、年月日などを個別に取得し変数に代入しています。
const year = now.getFullYear(); //年の取得
const month = now.getMonth() + 1; //月の取得
const date = now.getDate(); //日の取得
const hour = now.getHours(); //時間の取得
const min = now.getMinutes(); //分の取得
const sec = now.getSeconds(); //秒の取得3. getMonthメソッド
getMonthメソッドは、現在の月を取得します。
getMonthの整数値は0から始まる為、現在の月と同様の値にするには、以下のように1を足す必要があります。
const month = now.getMonth() + 1; //月の取得4. setInterval
setIntervalでは、第一引数の関数を第二引数の間隔で繰り返し実行します。
今回の機能では、関数『timer』を1000ミリ秒で実行しています。
setInterval(function(){
timer();
},1000);この繰り返し処理は、clearIntervalメソッドを使用することで、好きなタイミングで処理を停止することも可能です。
5. まとめ
Dateオブジェクトと、setIntervalを使用することで『背景色が切り替わるリアルタイム表示』という機能を作成することができました。
JavaScriptの基礎学習としてもよく出題される、DateオブジェクトとsetIntervalですが、getMonthメソッドのように扱いに注意しなければならないものもある為、しっかりと抑えておきたいですね！
参考サイト :
