トップへ戻る
BLOGS

JS 本日の日付データを利用しカウントダウンを作成する

JS 本日の日付データを利用しカウントダウンを作成する

今回はインスタンスを使用します。インスタンス?私もよくわからないので続きの記事も書こうと思います。

まずは変数に入れておきます。

ほい!

const today = new Date();

このnewというのがインスタンス??? 今回はリセットするという意味になるらしいです、、、

まずは取得できるデータを確認。

console.log(today);//本日のオブジェクト
console.log(today.getMonth() + 1 );//機械は0から1月を数え始めるためずれる
console.log(today.getDate());//今日の日付
console.log(today.getHours());//今日の時間
console.log(today.getMinutes());//今の分
console.log(today.getSeconds());//今の秒

そして曜日は、、

console.log(today.getDay());//今の曜日,0を日曜日から数えて曜日を数字として出力する。

ということでこちらで配列にしておく必要があります。

days = ["日","月","火","水","木","金","土"];
console.log(days[today.getDay()]);

これを利用して配列に変数をつなげて表示します。

はい!

days = ["日","月","火","水","木","金","土"];
let outputText = "今は";
outputText += "「" + today.getFullYear() + "年";
outputText += (today.getMonth()+1) + "月";//見やすくするための()
outputText += today.getDate() + "日 ";
outputText += today.getHours() + "時";
outputText += today.getMinutes() + "分";
outputText += today.getSeconds() + "秒";
outputText += today.getMilliseconds() + "ミリ秒";
outputText += "(" + days[today.getDay()] + ")";
outputText += "」です。";
document.getElementById("date").textContent = outputText;

これで本日の日付はうまく表示できました。次は明日の日付を表示するために変数todayをセットし直します。

その前に今回の上のやつを関数化しておこうと思います。

function outputDate(date) {
  outputText = "「" + date.getFullYear() + "年";
  outputText += (date.getMonth()+1) + "月";//見やすくするための()
  outputText += date.getDate() + "日 ";
  outputText += date.getHours() + "時";
  outputText += date.getMinutes() + "分";
  outputText += date.getSeconds() + "秒";
  outputText += date.getMilliseconds() + "ミリ秒";
  outputText += "(" + days[date.getDay()] + ")";
  outputText += "」です。";
  return outputText;
}

ここで引数にオブジェクトを受け取れるようにしたのでoutputDate(date)

その部分は書き換えて、最後につなげた変数の値を返すようにreturnしておきます。

document.getElementById("date").textContent = "今は" + outputDate(today);

これで先と同じ表示になります。では変数を書き換えていきます。

today.setDate(today.getDate() + 1 );
document.getElementById("tomorrow").textContent = "明日の今は" + outputDate(today);

today.setDate(today.getDate() + 1 );

setDateで書き換える際に+1することで明日の日付を表示することができます。

次は目標となる日付にカウントダウンです。

まずは目標となる日時を設定した変数にしておきます。

const targetDate = new Date(2022,1 - 1,25);

月の部分はずれてしまうのでー1しておきます。そしてこれをtodayで引き算します。

console.log(targetDate - today);

これだとミリ秒で表示されるのでこれを他の演算で現在の日付を割り出していきます。まずはミリ秒なのでこれを割る1000にします。

console.log((targetDate - today)/1000);

,,,,,,,,,,,,,,,,,,,,,,,,,,,

、、、、、、、、、、、、、、、、、、

、、、、、、、、、、、、、、、、、、、、、、、、

えい!!!!!!

console.log((targetDate - today)/(1000 * 60 * 60 * 24));

これで残りの日数が出ました。

const targetDate = new Date(2022,1 - 1,25);
document.getElementById("countdown").textContent = "ちゃーんのお誕生日まで、後" + Math.ceil((targetDate - today)/(1000 * 60 * 60 * 24)) + "日だね";

後はMath.ceil()で小数点を切り上げて目標の日時までのリアルタイムな日付を出力することができました。

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA