JavaScript自習 in GW④

こんばんは

GWも終わりますね。
振り返ると全然ゴールデンじゃなかったですね。
色で例えると黄土色・・・すごい地味でした。

仕事がら広告の運用などしているのである意味年中無休に見たいな感じで、完全に休みという感じにはならないんですよね。

はい、簡単ながらも今日も学習記録を綴っていこうと思います。

Date

日時を取り扱うオブジェクト

用途
1.現在時刻を取得
2.過去・未来の日時を取得
3.日時の計算

const now = new Date();

日時や計算をしたい場合初期化の設定が必要になり、ここでは「new」がその役割を果たしています。

カウントダウンタイマー

模写ではありますが簡単な物を作成
HTMLの記述は省略します。

function countdown(due){
const now = new Date();
   
   const rest = due.getTime() - now.getTime();
   const sec = Math.floor(rest / 1000) % 60;
   const min = Math.floor(rest / 1000 / 60) % 60;
   const hours = Math.floor(rest / 1000 / 60 / 60) % 24;
   const days = Math.floor(rest / 1000 / 60 / 60 / 24);
   const count = [days, hours, min, sec];
 
   return count;
}

let goal = new Date();
goal.setHours(23);
goal.setMinutes(59)
goal.setSeconds(59);

const  counter =  countdown(goal);
const time =`${counter[1]}時間${counter[2]}分${counter[3]}秒`;
document.getElementById("timer").textContent = time;

↓こんな感じになります。

やりたい事

ざーっくり言うとゴール時間と現在時刻を引き算して表示させるというものです。

解説

①まず現在時刻のオブジェクトをここで作ります。

function countdown(due){
const now = new Date();

②ゴール時刻を設定するオブジェクトdueから現在時刻をミリ秒で引き算
getTimeは1970年1月1日0時0分からの経過時間がミリ秒単位で算出される。

const rest = due.getTime() - now.getTime();

③ミリ秒単位の残り時間が定数restに代入されたので
　整数（Math.floor）で秒・分・時・日をそれぞれ計算。

算出方法
・÷1000⇒秒　÷60⇒分　÷60÷60⇒時　÷60÷60÷24⇒日　
・% 60⇒60、24でそれぞれ÷事で余り（残り時間）を算出

const sec = Math.floor(rest / 1000) % 60;
const min = Math.floor(rest / 1000 / 60) % 60;
const hours = Math.floor(rest / 1000 / 60 / 60) % 24;
const days = Math.floor(rest / 1000 / 60 / 60 / 24);
const count = [days, hours, min, sec];

return count;

④ゴールとなる時刻を1日の最後の時刻である23時59分59秒に設定。

let goal = new Date();
goal.setHours(23);
goal.setMinutes(59)
goal.setSeconds(59);

⑤countdown関数で計算した残り時間を定数counterに代入

const counter =  countdown(goal);

⑥テンプレートリテラルで定数counterに入っている計算した時間を呼び起こして、最後にテキストコンテンツとして呼び起こす。

const time =`${counter[1]}時間${counter[2]}分${counter[3]}秒`;
document.getElementById("timer").textContent = time;

難しいですね・・・
やりたい事はなんとなくイメージできますが、これを書けと言われたら手も足も出ない感じです。

GWの期間JavaScriptの学習をして感じた事は、そんな簡単には定着しないと言う事ですね（笑）

野球の素振りに近いイメージです。

バットを振った回数だけスイングの精度があがるみたく、コードを書いた分だけ血となり肉になるのではないかと思うので、地道に続けていければと思います。

終