jQueryででデジタル時計を１行で実装する！

サクウェブＴＶはコチラ↓↓↓

jQueryでデジタル時計を表示させるプラグインを簡単に作成しておきます。

以下のスクリプトをclock.jsとして保存してください。

clock.js

(function($) {
    $.extend({
		clock: function clock(target){
				var d = new Date();
				var h = d.getHours();
				var m = d.getMinutes();
				var s = d.getSeconds();
				h = h<10?"0"+h:h;
				m = m<10?"0"+m:m;
				s = s<10?"0"+s:s;
				var time_str = h + ":" + m + ":" + s;
				target.html(time_str);
				setTimeout(function(){
					clock(target)
				},1000);
			}
	});
})(jQuery);

そして以下のように読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="clock.js"></script>
<script type="text/javascript" src="script.js"></script>

あとは、script.jsに以下を記述するだけです。

$(function(){
    $.clock($("#target"));
});

今回は$("#target")というjQueryオブジェクトを引数に渡しています。

HTML内にid="target"を指定したタグの要素を取得しているわけです。

引数にはこのように時計を表示させたいタグのjQueryオブジェクトをわたします。

あとは、CSSで好きに装飾してください。