jquery countDownTimer

JavaScript

自分の必要性に応じたカウントダウンを実装できる「jquery countDownTimer」

jquery countDownTimerは自分の必要性に応じた様々なカウントダウンを実装することができるjQueryプラグインです。現在の日付から未来の日付までのカウントダウンや一般的なタイマー設定までいろんなカウントダウンを表示させることができます。

jquery countDownTimer

jquery countDownTimer

デモでは今日の日付から未来の日付までのカウントダウンや開始日を設定してそこから未来の日付までのカウントダウンを表示したりしています。

使い方はjQuery本体とプラグインファイルを読み込んだ状態で、カウントダウンを表示させたい場所に以下のようなHTMLを挿入しておきます。

<div id="countdowntimer"><span id="sample"><span></div>

あとはjquery countDownTimerのセッティングをするだけです。以下は割とわかりやすい例です。

$(function(){
    $("#sample").countdowntimer({
        startDate : "2015/05/01 00:00:00"‚
        dateAndTime : "2018/01/01 00:00:00"‚
        size : "lg"
    });
});

startDateには開始日を、dateAndTimeには未来の日付を設定します。

その他にも、単純に特定の時間からのタイマーをカウントダウン表示させることも可能です。以下のようにhoursやminutesに時間を設定するだけです。

この場合は3時間10分のタイマーがカウントダウン表示されます。

$(function(){
    $("#sample").countdowntimer({
        hours : 3‚
        minutes : 10‚
        size : "lg"
    });
});

こんな感じでいろんなパターンのカウントダウンを設定することができるので、気になる方は是非チェックしてみてはいかがでしょうか?

関連記事

  1. ReadRemaining.js

    JavaScript

    記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」

    ReadRemaining.jsは記事を読むのにどのくらい時間がかかる…

  2. no-image
  3. PopSelect

    JavaScript

    タグ形式のセレクトボックスをポップオーバーで表示させる「PopSelect」

    PopSelectはタグ付けするような感覚のセレクトボックスをポップオ…

  4. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

  5. Playful Little Tooltip Ideas
  6. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP