THE HAM MEDIA BLOG

jQuery自作:シンプルカウントダウンタイマー

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
plugin
Timer

jQuery自作:シンプルタイマー

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

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

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

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

デモプレビュー

jTimer Sample1

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

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

使い方

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

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

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

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

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

終了後のメッセージ

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

終了後のメッセージ変更

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

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

デモプレビュー2

jTimer Sample2

文字スタイルも拡張可能

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

デモプレビュー3

jTimer Sample3

ちょっとだけ注意

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

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

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

この記事へのコメント
素晴らしいプログラムを有難うございます。
ところで、本タイマーをIE8で実行すると、

メッセージ: 引数が無効です。
ライン: 116
文字: 165
コード: 0
URI: http://h2ham.up.seesaa.net/js/jquery-1.4.2.min.js


メッセージ: オブジェクトでサポートされていないプロパティまたはメソッドです。
ライン: 61
文字: 4
コード: 0
URI: http://h2ham.up.seesaa.net/js/jTimer0.1.js


メッセージ: オブジェクトでサポートされていないプロパティまたはメソッドです。
ライン: 74
文字: 4
コード: 0
URI: http://h2ham.up.seesaa.net/js/jTimer0.1.js

というエラーが出てしまいます。
これは解消可能でしょうか?
よろしくお願いいたします。
Posted by hikoneko at 2010年03月17日
>hikonekoさん
ご指摘ありがとうございます!
本当ですね、エラー出ちゃいますね(汗)
今更ながら、コードをみると、もっとシンプルにできるのでは・・・なんて思うのですが、
現状ですと解消する方法がぱっと思いつかないです。
いつになるか未定ですが、時間を見つけて再度チャレンジしてみようと思います!
Posted by ハム at 2010年03月27日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。