JavaScriptちゃんと学習中。
今回はDateオブジェクトを使ってカウントダウンタイマーの作成をするについてです。
ほぼ自分の勉強メモです。
過度な期待はしないでください。
手順
１、設定した未来時刻をパラメータで受け取る
２、ゴール時間から現在時刻を引く
３、計算結果を返す
未来時刻を設定
-Dateオブジェクトが持つ値に対して、日付と時刻の値をそれぞれ設定するメソッドが用意されている。
それが以下のメソッド
| メソッド | 説明 |
|---|---|
| setFullYear( ) | 年の値を設定する |
| setMonth( ) | 月の値を設定する |
| setDatet( ) | 日の値を設定する |
| setHours( ) | 時の値を設定する |
| setMinutes( ) | 分の値を設定する |
| setSeconds( ) | 秒の値を設定する |
-Dateオブジェクトのメソッド一覧はこちらを参照
MDN web docs – Date
- Dateオブジェクトで時間を設定
setHours、setMinutes、setSecondsメソッドで、時、分、秒をそれぞれ設定する必要があるが、
先ず、Dateオブジェクトを使いたい場合、最初にインスタンスの生成する必要がある事に注意。
インスタンスの生成をした事で、Dateオブジェクトを使い日時の出力や計算が出来るようになる。
なぜなら、その計算の基準日となっているのが現在日時だからです。
なので、インスタンス化し現在の日時を記憶したDateオブジェクトを使い日時の出力や計算が出来るようになる。
'use strict';
// newはオブジェクトをインスタンス化させる為のもの
// 現在の時刻（基準値）を変数goalに代入
let goal = new Date();
// メソッド使用して、２３：59：５９と設定
goal.setHours(23);
goal.setMinutes(59);
goal.setSeconds(59);
// ここで変数goalの中見を確認
console.log(goal);
// 例えば今日が2020年11月１３日なら
// 時、分、秒以外設定されていないので現在の年月日が取得される
Fri Nov 13 ２３：59：５９
関数を定義
- 設定した時刻をパラメータで受け取る関数を定義
-残り時間を算出する為の関数を記載
関数の定義は、functionを使用して行う。また、引数を使用して、関数に追加情報を与える。
function 関数名（引数名）{
//まとめたい処理内容
console.log(`私の名前は${引数名}`です);
};
// 引数を受け取る関数を呼び出す
定数名(値) → その値は関数の引数に代入される
-パラメータとして時間が設定されたDateオブジェクトを引数として受け取る関数を定義する
'use strict';
// 関数countdownを定義
// 引数にsetを追加して値を受け取られるようにする（引数名はどんな名前でも可能）
function countdown(set) {
//まとめたい処理内容
}
let goal = new Date();
goal.setHours(23);
goal.setMinutes(59);
goal.setSeconds(59);
// 定数counterに、countdown関数の処理を代入
// 設定した時刻が代入されている変数goalの値を関数の引数として渡す
const counter = countdown(goal);
- 残り時間を算出する為のプログラムを記載
-countdown関数の中身の処理を記載
残り時間を算出する為には、設定した時刻から現在の時刻を引くという計算をする。
その為には、先ずは現在の時刻を記憶したDateオブジェクトを生成する、つまりインスタンスの生成をする。
function countdown(set) {
// 現在の時刻（基準値）を変数nowに代入
const now = new Date();
}
-残り時間を算出する計算式を記載
先ず、設定した時刻から現在の時刻を引く為に、getTime( )メソッドを使用。
getTime( )メソッドは、1970年1月1日0時00分から、そのオブジェクトの基準日になっている
日時迄に経過したミリ秒を取得するメソッド。
例えば、現在2020年11月13日午後12時00分だと、getTime( )メソッドで1605279599309ミリ秒で出る。
これを設定した時刻のミリ秒から引くという計算をする。
function countdown(set) {
const now = new Date();
// 設定した時刻をが入っている引数と現在の時刻を記憶しているnowを使用して
// getTime( )メソッドでミリ秒で残り時間を算出し、定数restに代入
const rest = set.getTime() - now.getTime();
}
-定数restのミリ秒をもとに、秒、分、時、日を計算
先ずは秒から。
元の数値がミリ秒なので、1000で割れば全体の秒数が出る。
さらに、その答えを60で割れば分が出ます。すなわちの割った余りが秒になる。
例：39455000÷1000÷60=657 余り35
ここでいうと35が秒数
これをコードで書くと下記のようになる。
function countdown(set) {
const now = new Date();
const rest = set.getTime() - now.getTime();
const sec = Math.floor(rest / 1000) % 60;
}
1000で割った小数点以下は秒に満たないものなのでfloorメソッドで切り捨てる。
また、プログラムにおける演算式の%は、計算した余りを表示するものなの注意（決して割り算ではない）
次に分ですが、
上で計算した答えの結果を60で割った答えの余りが時になる。
657÷60=10 余り57
ここでいうと57が分になる。
これをコードで書くと下記のようになる。
function countdown(set) {
const now = new Date();
const rest = set.getTime() - now.getTime();
const sec = Math.floor(rest / 1000) % 60;
const min = Math.floor(rest / 1000 / 60) % 60;
}
ここも1000で割った小数点以下は分に満たないものなのでfloorメソッドで切り捨てる。
また、プログラムにおける演算式の%は、計算した余りを表示するものなの注意（決して割り算ではない）
次に時です。
上で計算した答えの結果を24で割った答えの余りが時になる。
10÷24=0 余り10
ここでいうと10が時になる。
これをコードで書くと下記のようになる。
function countdown(set) {
const now = new Date();
const rest = set.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;
}
ここも1000で割った小数点以下は1時間に満たないものなのでfloorメソッドで切り捨てる。
また、プログラムにおける演算式の%は、計算した余りを表示するものなの注意（決して割り算ではない）
最後に日ですが、
上の計算 10÷24=0 余り10
の余りじゃない方が日になるので、
ここでいうと0が日になる。
これをコードで書くと下記のようになる。
function countdown(set) {
const now = new Date();
const rest = set.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);
}
今後は、余りを表示させたい訳ではなく、割り算の結果を表示させたいのでこうなる。
-こうして出揃った、秒、分、時、日を配列にして定数に代入して、呼び出し元にリターンさせる。
function countdown(set) {
const now = new Date();
const rest = set.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;
}
「return 値」と書くことで、関数はその値を戻り値として返す。
- 現在の完成形
'use strict';
function countdown(set) {
const now = new Date();
const rest = set.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);
- 保存されたデータをもとに代入
-後は、関数の処理データが代入された定数counterをもとに、
テンプレートに代入させるだけ。
テンプレート例：
${counter[1]}時間${counter[2]}分${counter[3]}秒
配列の要素の取得の仕方は、配列名[配列番号]
配列番号は、0から１、２・・・と始まることに注意
最後に、getElementByIdメソッドを使って要素取得し、textContentプロパティを使用し出力する。
<p>後、<span id="timer"></span>で1日が終わります。</p>
'use strict';
function countdown(set) {
const now = new Date();
const rest = set.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;
後、10時間0分48秒で1日が終わります。
過去投稿記事
【JavaScript ~変数・定数、if文・switch文~】勉強メモ
【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~関数について~】勉強メモ③
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12