【JavaScript】Dateオブジェクトを使ってカウントダウンタイマーを作ってみよう

タイムリミットの時間を設定する

Dateオブジェクトでは時間を設定できるメソッドが準備されています。この設定した時間と、現在との時間を引き算することによってカウントダウンタイマーを作ることができます。

let goal = new Date();
//○○に当てはまる時間、分、秒を設定することができます。
goal.setHours(○○);
goal.setMinutes(○○);
goal.setSoconds(○○);

現在時刻との差分を得る

.getTime()メソッドでは1970年1月1日から現在までの経過時間をミリ秒数で得ることができます。これを利用し、設置した時刻の経過時数－現在の時刻の経過時数を計算することで、カウントダウンタイマーを作ることができます。

function countdown(due){
  const now = new Date();
  //現在時刻を取得してnowに代入
  const rest = due.getTime() - now.getTime();
  //.getTimeは1970.1.1から経過したミリ秒を示します。
  const sec = Math.floor(rest/1000)%60;
  //全体を1000で割ることで秒となり、さらに60で割った余りを求めれば、設置した時刻と現在時刻の秒差がでます。
  const min = Math.floor(rest/1000/60)%60;
  const hours = Math.floor(rest/1000/60/60)%24;
  const count = [hours,min,sec];

  return count;
}

//リミットとなる時間を設定する
let goal = new Date();
goal.setHours(23);
goal.setMinutes(59);
goal.setSeconds(59);

console.log(countdown(goal));
//countdown関数にgoalを引数として渡します。その結果、count配列がreturnされるので、配列が表示されます。
const counter = countdown(goal);
console.log(`今日の終わりまで残り${counter[0]}時間${counter[1]}分${counter[2]}秒`);

結果は次のようになります。

"今日の終わりまで残り0時間22分27秒"

getTime()ではミリ秒数で出てくるので、この値を秒、分、時間に変換する必要があります。少しややこしいですが、次の通りです。

  const sec = Math.floor(rest/1000)%60;
  //全体を1000で割ることで秒となり、さらに60で割った余りを求めれば、設置した時刻と現在時刻の秒差がでます。
  const min = Math.floor(rest/1000/60)%60;
  const hours = Math.floor(rest/1000/60/60)%24;

1秒ごとに再計算させるタイマーを作る

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 count = [hours,min,sec];
  return count;
}

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


function refresh(){
  setTimeout(reculcu,1000);
}


function reculcu(){
  const counter = countdown(goal);
  const time=`今日の終わりまで残り${counter[0]}時間${counter[1]}分${counter[2]}秒`;
  document.getElementById('timer').textContent = time;
  refresh();
}


reculcu();

一歩進んだコードの書き方

先ほど書いたJavaScriptコードの次の点を改良してみましょう。

未来の時間を指定するコードをすっきりさせる。
1桁の秒・分の時、レイアウトが崩れるので「o2分」などと表示するにする。

<span id ="hour"></span>時間
<span id = "min"></span>分
<span id ="sec"></span>秒

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 count = [hours,min,sec];
  return count;
}

let goal = new Date(2030,12,12,23,59,59);
//適当な未来の時間の23時59分59秒を指定してます。

function refresh(){
  setTimeout(reculcu,1000);
}

function reculcu(){
  const counter = countdown(goal);
  document.getElementById('hour').textContent = String(counter[0])
  document.getElementById('min').textContent = String(counter[1]).padStart(2,'0');
  document.getElementById('sec').textContent = String(counter[2]).padStart(2,'0');
  refresh();
  //分秒が一桁になると08秒などと表示します。
}


reculcu();

StringメソッドとpadStartメソッドとは？

String()では、()内のデータを文字列にします。

const number = 111;
//この時点では数値
String(number);
//数値ではなく文字列"111"になる。

padStart()は文字列の文字数を揃えるメソッドです。

〇〇〇（文字列）.padStart(揃える文字数,"足らない分を埋め合わせる文字");

Stringと合わせると、便利に使うことができます。

const number = 111;
console.log(String(number).padStart(10,"*"));

実行すると次のようになります。

"*******111"

現在時刻との差分を得る

一歩進んだコードの書き方

StringメソッドとpadStartメソッドとは？

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル