.new Date()

JavaScriptの.new Date()でカウントダウンされるタイマーを表示

2022年5月11日 5分

カウントダウンは、予告系のページ（いわゆるティザーページ）や、ECサイトのタイムセールでよく見かけます。

そんな設定した日時までカウントダウンさせる「タイマー」をJavaScriptの .new Date() を使って作ってみます。

.new Date()
カウントダウンされるタイマーのサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.new Date()

Date オブジェクトを作る際、JavaScript の new 演算子を使用して、日付を生成します。

var countDownDate = new Date("Feb 5, 2028 12:37:00").getTime();

この記事では、.new Date() を「タイマーの期日」や「現在の日付や時間の取得」で利用してカウントダウンされるタイマーを作っています。

カウントダウンされるタイマーのサンプル

早速サンプルです。ページを閲覧中の日時から、設定した「2028年2月5日 12：37：00」が期日となって、それまでの日時が徐々に減少していきます。

2028年2月5日 12：37まで

ちなみに、その期日を超過するとタイマー表示ではなくなり、「タイマーが終わったよ。」と表示されます。

実装の手順と方法

それぞれのコードの解説の前に、実装の手順と方法について簡単にご説明します。

HTMLを記述

設置したい場所へHTMLを記述します。

コードを表示

<p class="atdays">2028年2月5日 12：37まで</p>
<p id="countTimer"></p>

JavaScriptを記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body>で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

// タイマーの日付を設定
var countDownDate = new Date("Feb 5, 2028 12:37:00").getTime();
// 1秒おきに更新
var x = setInterval(function() {
  // 今日の日付と時間を取得
  var now = new Date().getTime();

  // 日付と時間の計算
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  // 出力する内容
  document.getElementById("countTimer").innerHTML = days + "<span>日</span>" + hours + "<span>時</span>"
  + minutes + "<span>分</span>" + seconds + "<span>秒</span>";

  // タイマー終了後
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countTimer").innerHTML = "タイマーが終わったよ。";
  }
}, 1000);

CSSを記述

次に、CSSを記述します。

コードを表示

p.atdays {
    display: inline-block;
    margin: 0 auto 10px;
    background: #f0db3f;
    color: #313131;
    padding: 3px 20px;
    position: relative;
    border-radius: 2px;
    font-size: 0.9rem;
}
p.atdays:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #f0db3f;
    z-index: 2;
}
p#countTimer {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.08rem;
    text-align: center;
}
p#countTimer span {
    font-size: 1rem;
    font-weight: 400;
    margin-right: 10px;
}

かかかず

これで完了です。

ざっくりとしたコードの解説

コードはHTML・JavaScript・CSSの3種です。ざっくりですが、順に解説していきます。

HTML

HTMLは、「atdays」のclass名を持つ p タグがタイマーの上部にある吹き出しで、id名「countTimer」がタイマー表示される要素です。

<p class="atdays">2028年2月5日 12：37まで</p>
<p id="countTimer"></p>

「countTimer」のid名を持つ要素には、JavaScriptでカウントされたHTMLを出力・表示させるので、id名を変えた場合は、JavaScriptのコードもそのid名に変更する必要があります。

JavaScript

JavaScriptは、まずはじめにタイマーの日付を設定します。設定完了後に、1秒おきに更新していく関数を作っていきます。

// タイマーの日付を設定
var countDownDate = new Date("Feb 5, 2028 12:37:00").getTime();
// 1秒おきに更新
var x = setInterval(function() {
  // 今日の日付と時間を取得
  var now = new Date().getTime();

  // 日付と時間の計算
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  // 出力する内容
  document.getElementById("countTimer").innerHTML = days + "<span>日</span>" + hours + "<span>時</span>"
  + minutes + "<span>分</span>" + seconds + "<span>秒</span>";

  // タイマー終了後
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countTimer").innerHTML = "タイマーが終わったよ。";
  }
}, 1000);

days・hours・minutes・secondsの変数宣言では、Math.floorメソッドを使って、数値の小数点以下の切り捨て処理を行い日付と時間の計算を行います。

かかかず

コード量は多いですが、JavaScriptが不明な方でも、雰囲気で処理内容が追えるような書き方だと思います。

CSS

CSSは、表示される文字のフォントサイズや色味を調整しているだけのコードです。ので、そのまま使うことはないかと思いますが、この記事のサンプルに近しいものにする場合は、こちらのコードを参考にしてみてください。

p.atdays {
    display: inline-block;
    margin: 0 auto 10px;
    background: #f0db3f;
    color: #313131;
    padding: 3px 20px;
    position: relative;
    border-radius: 2px;
    font-size: 0.9rem;
}
p.atdays:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #f0db3f;
    z-index: 2;
}
p#countTimer {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.08rem;
    text-align: center;
}
p#countTimer span {
    font-size: 1rem;
    font-weight: 400;
    margin-right: 10px;
}