特定の日時までのカウントダウンをリアルタイムに表示する 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>
- var cd = new countDown() で日時を渡して cd オブジェクトを生成。
- cd.message プロパティにカウントダウン終了時のメッセージを設定。
- cd.display() メソッドで、タイマーを挿入したい要素の ID 属性を指定。
- タイマーの数値に指定された、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() のあたりが、いまいちエレガントじゃない気がする。ていうかよくわからん。