投稿日：2021年2月21日
下記の先日の記事、
さらに現在作成中の内惑星と外惑星を合体したシミュレーターを作る過程で作成した、HTMLの<input type="date"> の強化版が手前味噌ですが、案外良い出来なので記事にしました。
仕様
・開始は2020年1月1日になっています。
・1秒で1日進行します。
・カレンダーを手動で変更すると進行が止まります。
・カレンダー右隣の数値は、1年間の進行日数（左）とトータル（年跨ぎ）の進行日数（右）です。
・自動進行したい場合は再開をクリックします。
・x1ボタンをクリックすると10倍づつ速度が速くなります。最大はx1000です。
・シフトボタンを押しながらだと下がるようになっています。
・停止をクリックすると進行が停止します。再開をクリックすると再開します。
・逆回転をクリックすると日数を遡ります。
遡っている最中に再度クリックすると昇順に進みます。
開始年月日の2020年1月1日以前になるとトータル日数はマイナス値になります。
・うるう年※の計算ロジックも組み込んであります。
※うるう年：4または、400で割り切れる年はうるう年。100で割り切れる年は平年。
2021年5月15日追記
▲ページ読み込み時に、今日の日付を表示する仕様にしてみました。
始めは停止しており、経過日数の表示は消去しました。
※現在Reactを勉強中で、これをReactで書いてみたいと思ってます。
カレンダーのロジック、経過日数のロジック、ボタンのロジック、それぞれの機能を連動させるロジックなど少々苦労しました。
これから惑星公転軌道と連動するようにして行きたいと思います。
注意としてカレンダーを表示している<input type="date"> はブラウザによって見え方が異なります。
macOSのSafariでは<input type="text"> と同じ表示になります。
最後まで読んでくださりありがとうございました。
