THE HAM MEDIA BLOG

ちょっとしたカウントダウンのタイマーが必要になったので、簡単に作ってプラグインにしてみた。

かなりシンプルに、ただ単純にカウントダウンしていくだけ。

シンプルなカウントダウンタイマー

読み込んだ時点からカウントダウンが始まる単純なもの。まずは見てください。

デモプレビュー

20分から始まって、カウントダウンが終わると「終了しました」と表示されるだけ。

多機能にしようかとも思ったのですが、今はそこまで自分のなかで求めていなかったのでシンプルな形で落ち着きました。

使い方

まずはプラグインをダウンロードして使ってください。直接ここから読み込んで使うことの無いようにお願いします。

jQuery jTimer Plugin

使い方もシンプルになっています。

そして下記のように、タイマーにしたいセレクターにjTimerの機能をつけます。

$("selector").jTimer(minute,second);

minuteには設定する分を、secondには設定する秒を書いてください。何も書かない場合はデフォルトを20分に設定してあります。20分に特に意味はありません。…３分とかの方がよかったでしょうか。

終了後のメッセージ

タイマーが終了する「0:00」になると、最後に「終了しました」という表示に切り替わります。この表示は変更することができます。

終了後のメッセージ変更

$("selector").jTimer(minute,second,{
    finishMessage:'終わったぜこのやろー！'
});

「finishMessage:''」の''の中を変更することで、終了後の表示を変更できます。

デモプレビュー２

文字スタイルも拡張可能

基本的に外枠はp#timerAreaってのと、その中にspan#minとspan#secで構成されているから、そのスタイルを指定したら文字の大きさも色も変えられる。

デモプレビュー３

ちょっとだけ注意

このプラグイン、通常１つだけの使用が目的なので、１ページに１つを基本にしてもらいたいです。このエントリーのように、複数起動させると、タイミングによっては、バグが発生して、うまくカウントダウンしてくれないです。シンプルだからしかたない。IDじゃなくて、class指定でDOM取得すればよかったなーといまさら思う。。。でもなおさらバグが発生する可能性もたかいよなー。。。複数ある場合の処理とかも加えたほうがいいのかもしれなさそうだ。

それと、動作でpタグで囲うように作ってしまったけど、基本divのほうがよかったなーなんていまさら後悔…そして、分と秒の間にコロン（：）入れちゃったけど、あれも拡張で取れたりとかできたほうがよかったかも。そうしたらもう少し自由にカスタマイズとかできたなーなんて思う。外枠なくしたりとかね。ま、なにぶん、今回はシンプルに作ったからしかたない。いつかたぶん、拡張させます。というか、利用するケースがないという話も。。。

今度時間のできた時にでも、ソースの解説とか失敗談書きますね。