Javascriptの初心者向けとして扱われるカウントダウンを練習で作ってみましょう。
Date()については以下で説明しています。
Contents
JSでカウントダウンを作成(時間まで)
いきなり本格的なのは難しいのでまずは時間、分、秒のカウントダウンを作成します。
let countdown = function(due){
// 現在日時を取得
let now = new Date();
// 現在日時と引数dueの時間の差を取得
let rest = due.getTime() - now.getTime();
// 差の秒の値を取得
let sec = Math.floor(rest / 1000) % 60;
// 差の分の値を取得
let min = Math.floor(rest / 1000 / 60) % 60;
// 差の時間を取得
let hours = Math.floor(rest / 1000 / 60 / 60) % 24;
// 差の日付を取得
let days = Math.floor(rest / 1000 / 60 / 60 /24);
// countに差の一覧を代入
let count = [days, hours, min, sec];
// countを戻す
return count;
}
// 期日を設定
let goal = new Date();
goal.setHours(23);
goal.setMinutes(59);
goal.setSeconds(59);
// recalcの中にファンクションを変数として代入
let recalc = function(){
// counterにcountdown(goal)の結果を代入
let counter = countdown(goal);
// counterの値をhtmlのIDがtimerの場所へ表示
let time = counter[1] + "時間" + counter[2] + "分" + counter[3] + "秒";
document.getElementById("timer").textContent = time;
// refreshを実行
refresh();
}
let refresh = function(){
// 指定した(1/1000 秒)時間の後にrecalcを実行
setTimeout(recalc, 1000);
}
// recalc()を呼び出し
recalc();コメントで説明をのせました。下から読んだ方がわかりやすいかもしれません。人それぞれですかね。
CODEPENで動かしてみます。
JSでカウントダウンを作成(日付つき)
やっぱり物足りないので、日付もつけてみたいと思います。
カウントダウンを作ってみよう
ちなみに上記のJavascriptにはすでに日付を実装する準備がしてあります。
下にスクロールする前に考えてみるのも楽しいと思います。
ヒント：setDate()を使って日付を設定することができる
答え
カウントダウンのエンドアクションを作る
このままだとカウントダウンの期日が過ぎた後はマイナスの値が表示されてしまい見栄えがよくなくなってしまいます。（日付などをずらすと確認できると思います。）
エンドアクションを作ってみよう
期日が過ぎた後の処理を入れたいと思いますが、こちらも一度考えてみると面白いと思います。
ヒント：期日 – 現在とif文
答え
if文の条件が個人的には難しいポイントでした。
おまけ カウントダウンの期日のその他設定方法
ついでに別の方法での期日設定方法です。
期日を以下のように設定しただけですが、こちらの方が設定しやすいかもしれないですね。
// 期日を設定
let Year = 2025;
let Month = 5 – 1; //月はマイナス１ヶ月
let Day = 24;
let goal = new Date(Year, Month, Day);
おわり
これで初心者なのかと思うと先が長く感じてしまいますね。
受講中サイト: https://frontendmasters.com/
参考サイト：https://www.w3schools.com/howto/howto_js_countdown.asp
