JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.new Date()

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

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

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

そんな設定した日時までカウントダウンさせる「タイマー」をJavaScriptの .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;
}

さいごに

先生

コード量は多めですが、この記事のようなコードで実装できるので、是非参考にしてみてください。