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"
    });
});

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

awNoticesスタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」前のページ

指でなぞるだけで簡単にモザイク(ぼかし)処理できるiPhoneアプリ「モザイク」次のページ

関連記事

  1. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

  2. Jqx-Media-Slider
  3. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  4. FilmRoll

    JavaScript

    中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

    FilmRollというjQueryプラグインを使えば中央に来た項目に焦…

  5. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

  6. ax5ui-menu

    JavaScript

    カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

    ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニュ…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP