【jQuery】カウントダウン・タイマーを入れよう！

taka_oj
|
2019年3月27日
| コメントはまだありません
| JavaScript

jQueryのplug-inで簡単に「カウントダウン・タイマー」が入れられます！
東京オリンピック等、イベントまでのカウントダウンや期間限定商品の告知など、使い方はあなた次第！

本当に簡単なので、ぜひ試してみてくださいね。

今回は、必要なファイルを読み込んでおいて、簡単なjQueryとHTMLを記述するだけで、ウェブページに「カウントダウンタイマー」を表示できるjQueryプラグインの紹介になります。

まずは、サンプル・デモをご覧ください。

デモページは、こちら

カウントダウンはサイトにアクセスした時点から始まります。

このプラグインを使えば、「日」「時」「分」「秒」などを細かく設定できる「カウントダウン・タイマー」をWeb上に作成することができます。

さらに、現在時刻の表示や文字サイズも指定でき、シンプルかつ使い勝手のいいおすすめプラグインです。

以下からダウンロードできます。
↓↓↓↓↓【jquery countDownTimer】↓↓↓↓↓↓

ダウンロード：https://github.com/harshen/jquery-countdownTimer

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
↓デモのサンプルコードは以下の通りです。

▼HTML

<h1>【jQuery】カウントダウンタイマーを入れよう！</h1>

<h2>現在時刻</h2>
<span id="current_timer" class="style bg_timer size_lg">Now</span>

<h2>5分タイマー</h2>
<span id="ms_timer" class="style bg_timer size_lg">Ready?</span>

<h2>4時間32分タイマー</h2>
<span id="hm_timer" class="style bg_timer size_lg">Ready?</span>

<h2>東京オリンピック【2020/07/24開催】までのカウントダウン</h2>
<span id="future_date" class="style bg_timer size_lg">Count down Start!!</span>

▼jQuery

//現在時刻
$(function () {
    $('#current_timer').countdowntimer({
        currentTime: true,
        size: "lg"
    });
});

//5分タイマー
$(function () {
    $('#ms_timer').countdowntimer({
        minutes: 5,
        size: "lg"
    });
});

//4時間32分タイマー
$(function () {
    $('#hm_timer').countdowntimer({
        hours: 4,
        minutes: 32,
        size: "lg"
    });
});

//東京オリンピックまでのカウントダウン
$(function () {
    $('#future_date').countdowntimer({
        dateAndTime: "2020/07/24 00:00:00",
        size: "lg"
    });
});

デモのように「4時間32分」がカウントダウンされるような表示にしたければ、
hours : 4‚　minutes : 32
と、時間を設定するだけです。

文字サイズは５段階
・ xl – Extra large
★ lg – Large　　（←今回のデモで使用）
・ md – Medium
・ sm – Small
・ xs – Extra small

このように、自分好みの「カウントダウン・タイマー」を設定することができるので、ぜひ色々試してくださいね！

今回、参考にさせていただいたのは、
jQueryプラグイン – 現在時刻も表示できるカウントダウン・タイマー – countdownTimerさんのページです。
ありがとうございます。

JavaScript