[JavaScript]カウントダウンするjsライブラリ

Countdown.js

今回紹介するcountdown.jsは、フォーム送信等のあらゆるイベント時において、カウントダウンを可能にするライブラリです。
秒数とコールバックを指定することで、1秒毎に処理が実行され、完了時にも任意の処理を行うことができます。
ここのデモ画面で動作を確認することができます。
ボタンをクリックするとカウントダウンがはじまり、0になったらボタンのラベルが変わりますね。

なお、このライブラリはクライアントサイドでも動作しますし、nodeモジュールとしても使用できます。
今回はbowerからライブラリをインストールして、nodeで動作を確認してみましょう。

環境構築方法

今回使用した動作環境は以下のとおりです。

• OS : MacOS X 10.7.5
• Node.js : v0.10.8
• bower : 1.2.6

bowerを使用してライブラリをインストールしましょう。

% mkdir countdown && cd coutdown
% bower install https://github.com/gumroad/countdown.js.git

サンプル作成

インストールができたら、nodeで動作するサンプルを作成します。
下記のように、5秒のカウントダウンを設定し、1秒毎に残り秒数を表示、0になったらメッセージを表示します。

//path/your/countdown/app.js
var Countdown = require("./countdown.js/lib/countdown.js");
var countdown = new Countdown(5, function(seconds) {
  console.log(seconds); //log the number of seconds that have passed
}, function() {
   console.log("Countdown complete!") //log that the countdown has complete
});

ではサンプルを実行してみましょう。カウントダウンが実行されます。

%node app.js                                                                                                                                   [~/srcs/nodeapps/countdown:9:41]
5
4
3
2
1
Countdown complete!

まとめ

Gmailのメール送信のように、少し処理を遅らせたいようなケースで簡単に使えます。
nodeでもクライアントでも使用できるので便利ですね。

参考サイトなど

• Github: https://github.com/gumroad/countdown.js