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

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  2. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  3. PreViewTube.js
  4. star-rating-svg

    JavaScript

    カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」

    star-rating-svgは、SVGを使用したカスタマイズ性に優れ…

  5. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

  6. Chariot

    JavaScript

    Webページ内でステップごとのガイドツアーを実装できる「Chariot」

    ChariotはWebページ内でのガイドツアーを実装することができるJ…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP