経過日数を取得して「NEW」をコントロールしてみた
javascriptって楽しいですね!
新着情報などでよく見る「NEW」マークの表示、非表示を自動で管理したくなりました。
方法というか、やり方だけはパッと浮かびました。
「本日の日付」と「新着情報をアップロードした日付」を比較して、その差が一定日数経っていると「NEW」のclassを削除すればいい。と。
普段javascriptを組むことは無く、引き出しの数も当然少なく、思った、考える方をコードを表現することは困難でした。
なので、1つずつ順を追って考える事にしました。
アップロードした日付を取得する
htmlのソース内にdata-を用いてアップロードした日付を任意で設定する事にしました。
(試行錯誤の結果)
リリース情報を追加!
現在の日付を取得
現在の日付を取得する方法としては、new Date()を使用しました。
このnew Date()ですが、うるう年も把握しており、オリンピックの年にだけ2月29日を認識するみたいです。
new Date()に関する記事はこちら
意外と知られていないJavaScriptのnew Date()の使用方法
後は「本日の日付」から「アップロードされた日付」を引くことで経過日数を取得し、任意の日数と比較することでソースコードを変更する。という流れの完成です。
正直ここまでの道のりは長かったです。「あれ。JSってどやって書くんだっけ!?」と、一瞬頭が真っ白になる場面もありました。動作が確認出来てからはソースコードの見直しを行い、いろんな書き方を知ることができました。まだまだ、修正を加えたりすることもあるかもしれません!
その為にも日頃から書くことを心がけないとダメですねー。