sugulogの日記

JavaScriptとDateオブジェクト!日付時間値を計算しよう!!

スポンサードリンク

f:id:sugulog:20210327225841p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとDateオブジェクトいうことで

  •  日付時間値を計算しよう

について簡単に解説します!!

その為このブログを読むことで、Dateオブジェクトを用いた日付時間値の計算ができるようになっているのはもちろん、実際の実装に活かせる技術を手に入れることができます。

是非最後までご愛読ください。

 

今回は、

  • Dateインスタンスに日時を設定しよう

  • 日付時間値を計算しよう

  • 経過時間を計算しよう

の順で解説していきます。

では早速、みていきましょう!!

・Dateインスタンスに日時を設定しよう

Dateオブジェクトを生成する際、引数に文字列情報等で日付と時間を指定することができます。

指定する際は以下のような形で指定することができます。

f:id:sugulog:20210327224357p:plain

数値で指定する際は、年、月、日、時、分、秒、ミリ秒の順番で指定していきます。

省略した場合は0が代入されます。

この際、月に関しては0~11の数値で指定します。

つまり上記では見た目上は6月18日を指定していますが、実際に指定されるのは7月18日になります。

またインスタンス生成後はset○○()系のメソッドで指定できます。

sugulog.hatenadiary.jp

・日付時間を計算しよう

日付時間は以下のように計算することができます。

f:id:sugulog:20210405220004p:plain

①ではインスタンス化された日付の月をgetMonthで取得し1を引くことにより、1ヶ月前の月を計算しています。

②ではインスタンス化された日付の日をgetDateで取得し15を足すことにより、15日後の日を計算しています。

③ではインスタンス化された日付同士をgetTimeでタイムスタンプ値として取得し、引くことにより差分を計算しています。

また取得した値(タイムスタンプ値)はミリ秒単位です。

そのため今回は日で表示したいため、24(1日の時間)×60(1時間の分数)×60(1分の秒数)×1000(1秒のミリ秒数)の値で割っています。

では実際にコンソールで確認してみましょう。

f:id:sugulog:20210405220415p:plain

それぞれしっかりと計算されているのが確認できますね!

また③で時間として表示したい場合は60×60×1000、分として表示したい場合は60×1000、秒として表示したい場合は1000で割りましょう!!

・経過時間を計算しよう

では今回のブログの学習を応用し、ブラウザが表示されてからボタンが押されるまでの経過時間を計算し表示してみましょう。

まずはHTMLにボタンと表示箇所を記述します。

f:id:sugulog:20210406220616p:plain

次にJavaScriptで以下のように記述しました。

f:id:sugulog:20210406221208p:plain

 ポイントとしてはブラウザが読み込まれた時(ファイルが読み込まれた時)とボタンがクリックされた時のタイムスタンプ値をDate.now()を使い取得していることです。

この結果2つの差分を求め、今回は秒単位に変換し経過時間を表示しています。

では実際に挙動を確認してみましょう。

f:id:sugulog:20210406222556g:plain

ボタンがクリックされる度に経過時間が更新されているのが確認できますね!!

 

以上、今回のブログでした。

Dateオブジェクトを用いた日付時間値の計算ができるようになり、実際の実装に活かせる技術を手に入れることができましたか??

チケット等の有効期限の計算などにも応用できそうな実装でしたね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!