特定の日時までのカウントダウンをリアルタイムに表示する JavaScript のクラスを作った。

サンプル – JavaScript によるカウントダウン

サンプルのソース

<div id="countdown">
    <div><span id="time">2011/01/01</span> まで</div>
    <div id="timer"></div>
</div><!--end #countdown-->
 --中略--
<script type="text/javascript">
var datetime = document.getElementById('time').childNodes[0].nodeValue;
var cd = new countDown(datetime);
cd.message = 'あけおめ！';
cd.display('timer');
</script>

1. var cd = new countDown() で日時を渡して cd オブジェクトを生成。
2. cd.message プロパティにカウントダウン終了時のメッセージを設定。
3. cd.display() メソッドで、タイマーを挿入したい要素の ID 属性を指定。
4. タイマーの数値に指定された、counter というクラス属性に対して、CSS で文字サイズを拡大。

countdown.class.js のソース

countDown クラスのソースは以下のとおり。 （ダウンロードはこちら）

適当にカスタマイズしてご利用下さい。

function countDown(time) {
    var day = new Date(time);
    this.period = day.getTime();
}

countDown.prototype.message = '終了しました！';

countDown.prototype.display = function(ele){
    this.obj = document.getElementById(ele);
    this._getCounter(this);
}

countDown.prototype._getCounter = function(_this){
    var timer = setTimeout(function(){_this._getCounter(_this);}, 1000);

    var now = new Date();
    var total = parseInt((this.period - now.getTime()) / 1000);
    if (0 >= parseInt(total)) {
        _this.obj.innerHTML = _this.message;
        clearTimeout(timer);
        return;
    }
    var sec = total % 60;
    var min = ((total - sec) % 3600) / 60;
    var hour = (total - min * 60 - sec) / 3600;

    _this.obj.innerHTML = '';

    var data = {
        '時間': hour,
        '分':   min,
        '秒':   sec
    };

    for (var i in data) {
        var node = document.createElement('span');
        node.className = 'counter';
        var value = document.createTextNode(data[i]);
        node.appendChild(value);
        _this.obj.appendChild(node);
        _this.obj.appendChild(document.createTextNode(i));
    }
}

setTImeout() のあたりが、いまいちエレガントじゃない気がする。ていうかよくわからん。

JavaScript で任意の日付をUTCとみなして、ローカル時間に変換するメソッドを作った。（ってほどでもないけど。。。）

せっかくなので、Date オブジェクトのメソッドとしてコール可能なようにした。

ソース

以下のソースを適当にコピペしてご利用下さい。

Date.prototype.utc2local = function()
{
    this.setTime(
        this.getTime()-(this.getTimezoneOffset()*60*1000)
    );
}

使い方

以下のような感じで。

Date.utc2local() を実行した後は、Date オブジェクトにセットされている時間が UTC になります。

var d = new Date('2010/9/1 00:00:00'); // UTCの日時
d.utc2local();
alert(d.getHours()); // ローカルな時間

こんなものは、たくさんあると思うのですが。。。

表示されているページにリンクを貼るためのHTMLを取得するためのブックマークレット。

リンクを取得する

上記のリンクをブックマークバーあるいは右クリックでお気に入りに追加しておけば、任意のページへリンクを貼るためのHTMLが入力されたTEXTAREAがページの右上に表示される。

ちなみにブックマークレットのソースは以下。

ソースをダウンロード

その他

こういう方法もある。

• Going My Way: タイトルとURLをワンクリックでメモするBookmarklet