Pocket

下記の先日の記事、



 

さらに現在作成中の内惑星と外惑星を合体したシミュレーターを作る過程で作成した、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"> と同じ表示になります。

 

最後まで読んでくださりありがとうございました。
 


 

Pocket