カウントダウン機能をうまく使うとわくわくするようなコンテンツが提供できます。自分が生まれてから何時間経ったのか、未来のある日時にローンチするサービスを案内したりと色々な使い方が考えられます。 日時の差分をとって表示するのが基本ですが、その辺りの面倒さを吸収してくれるライブラリがCountdown.jsです。 日時の差分を年、月、週、日、時間といった具合に全て分割して取得できています。さらに文字列の取得もできます。

ts.toString() => "5 years, 1 month, 19 days, 12 hours, and 17 minutes"

と言った感じです。HTML出力もサポートされています。

ts.toHTML() => "<span>5 years</span>, <span>1 month</span>, <span>19 days</span>, <span>12 hours</span>, and <span>17 minutes</span>"
ts.toHTML("em") => "<em>5 years</em>, <em>1 month</em>, <em>19 days</em>, <em>12 hours</em>, and <em>17 minutes</em>"

区切りを自動挿入してくれるので、リストを作ったりすることもできるでしょう。引数の指定が、

var timespan = countdown(start|callback, end|callback, units, max, digits);

のようになっていて、コールバック指定ができるのが特徴です。そのため次のような渡し方ができます。

var timerId =
  countdown(
    new Date(),
    function(ts) {
      document.getElementById('pageTimer').innerHTML = ts.toHTML("strong");
    },
    countdown.HOURS|countdown.MINUTES|countdown.SECONDS);

関数を渡して随時変わる値を参照させることができます。JavaScriptならではな感じがして面白いですね。 オンラインのエディタを起動してからの時間を表示したり、誕生日からの日数を表示したりと使いどころが多いと思います。意外と煩雑になりやすそうな処理だけにCountdown.jsを使ってまとめられるとコードがすっきりしそうです。 Countdown.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Countdown.js Countdown.js Demo mckamey / countdown.js — Bitbucket