JSとjQueryで指定した曜日までのカウントダウンをつくってみる（わくわく華金ver.）

ども、むったん（@6ttan）です。

最近お仕事でJavaScriptを書く事が多くて、ゴリゴリに書くのは苦手ですが…JSって思い通りに動くとやっぱり楽しいですよね☺️
そして一緒にお仕事している方がjQueryではなく、JSをゴリゴリ書くもんで「やっぱり脱jQueryの流れなんだろうな…」とそちらに基準を合わせようと必死です。

JSでゴリゴリ書いてみた

今回はタイトル通りわくわく華金ver.ということで、今の日時から直近（未来）金曜日までのカウントダウンを作ってみました。
私はお酒は飲めないけど、酒のつまみとなる物が大好きなので緑茶片手につまみを食べて、みんなと話をする時間が大好きです❤️

まぁ、こんなご時世ですから…「華金うぇーーい！」はまだできないですけど、早くうぇーいしたいものです。

さて、そんなわくわく華金を「毎週金曜日18:30」と仮定して、今この瞬間から金曜日の18:30まであと何日何時間何分何秒あるのかカウントダウンします。
ちなみに金曜日の18:30を過ぎたら、翌週金曜日の18:30までのカウントダウンを開始します（気持ち前のめりw

コード＆デモ

まずはコードとデモです。

See the Pen JSで華金までのカウントダウン（18:30退社） by むったん (@6ttan) on CodePen.

コードのポイント

まず最初に華金（＝お仕事終了）時間をhour, minute, secondに代入します。
次に1秒ごとに時間の表示を変更したいので、intervalを宣言しておきます。
※のちにsetIntervalで使用します。

またtargetWeekの5は金曜日を指しています。
0=日曜日　〜　6=土曜日　となっております。

function checkComplete ()ではメインの処理を行っていて…
直近金曜日（5）より今日の曜日の数が大きいか、同じか、少ないかによってdays部分の計算を変えています。

例えば、今日が金曜日（5）だったとして18時30分01秒の場合、カウントダウンは7days23:59:59とならないといけないのですが、39行のままだと0days23:59:59という永遠に華金が来ないループに陥ります😭

なので、function diffTimeClac ()で今の時間が金曜日の18:30:00より大きくなったらflagをtrueにして、先ほどのif文内でflagがtrueだったらdaysに7を代入する…というようにしています。
ちなみに土曜日になってしまえば、金曜日（5）より土曜日（6）の方が大きいので、また計算してdaysに代入するようにしています。

…日付から計算するより、getDay()の数字を計算した方が残日数出すのは早いかなと思ったのですが…もっと簡単なやり方ってあるのかな🤔

toDoubleDigitsの部分は一桁の数字の場合は0を頭につけて桁を合わせるゼロパディングという方法です。

jQuery plugin 「Flip counter」でやってみた

次は、Flip counterというjQuery pluginで華金までをカウントダウンしてみました。
導入も設定も超ラクだし、見た目がフリップ時計でおしゃれ✨
ちょっとした物で使うくらいなら、上みたいにゴリゴリ書かなくてもこっちで済ませていいかも…と思ってしまうレベルでした。

ダウンロード＆準備

まずはFlip counterのサイトのDownload NowからファイルをDLしてきます。
DLしたらdist/flip.min.cssとdist/flip.min.jsを適宜使用するディレクトリに移動してください。
移動したらhead内にflip.min.cssを</body>前にflip.min.jsを書いてください。

詳しくはSetupをご覧ください。

コード＆デモ

次はコードとデモです。

See the Pen Flip couter(jQuery) every friday at 18:30 by むったん (@6ttan) on CodePen.

サンプルをそのまま持ってきて、ちょっと色を変えただけでこの出来栄え✨
そして華金18:30までのカウントをするためにevery friday at 18:30と書き換えただけでこれができてしまうのは凄いよ！！！

他にも時計、イベントカウントダウン、ストップウォッチ、数字以外の文字を見せたりもできる万能物！
色々試してみてください。

…手軽すぎてコードの説明する事が全くなかったw