jsWaffleでAndroidアプリを作ろう！デジタル時計編②

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

では、時計の実行結果です。

はい。時計としてちゃんと動いています。

まあ、このアプリを何に使うのかはよくわかりませんが・・・

でも、clock()は通常のWEB開発でも使用できますので、何かの時に使って頂ければ幸いです。

さて、これでは少し味気ないので数字に画像などを用いてオリジナリティをＵＰさせたい！という方のために数字を画像に置き換えるところまではカスタマイズしておきましょう。

script.jsを以下のように書き換えてください。

$(function(){
	clock2($("#times"));
	
	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);
	}
	
	function clock2(target){
		var d = new Date();
		var h = d.getHours();
		var m = d.getMinutes();
		var s = d.getSeconds();
		h = h<10?"0"+h:String(h);
		m = m<10?"0"+m:String(m);
		s = s<10?"0"+s:String(s);
		
		h = "<img src='./img/num_" + h.substr(0,1) + ".png' /><img src='./img/num_" + h.substr(1,1) + ".png'/>";
		m = "<img src='./img/num_" + m.substr(0,1) + ".png' /><img src='./img/num_" + m.substr(1,1) + ".png'/>";
		s = "<img src='./img/num_" + s.substr(0,1) + ".png' /><img src='./img/num_" + s.substr(1,1) + ".png'/>";
		
		var time_str = h + ":" + m + ":" + s;
		target.html(time_str);
		setTimeout(function(){
			clock2(target)
		},1000);
	}
});

clock()とは別にclock2()を定義してあります。もし、clock2()のみを使用するようならclock()は削除してしまって構いません。

一応、両者の違いが分かるように両方載せておきました。

違いは、変数h,m,sに対してimgタグを挿入して画像が表示できるようにしているところだけです。

substr()で必要な数字を切り出し、切り出したのが３ならばnum_3.pngという画像をsrcに配置するといった具合です。

したがって、これをきちんと表示させるためには、

www/imgというフォルダを作りそのなかにnum_●.pngという０～９までの画像を用意する必要があります。

つまり、画像次第でかなりオリジナリティのあるデジタル時計が作れるというわけです。

画像を使うとどんな具合になるか実行結果は次の記事です。

＞＞jsWaffleでAndroidアプリを作ろう！デジタル時計編③＜＜