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. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  2. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり…

  4. FixedContent.js

    JavaScript

    モバイルフレンドリーなコンテンツ固定のjQueryプラグイン「FixedContent.js」

    FixedContent.jsはスクロールしてもコンテンツを固定してく…

  5. SimpleCalculadora

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  6. Bricks.js

    JavaScript

    超高速なMasonryレイアウトを実装できる「Bricks.js」

    Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP