ActiveDesktop_02

Last-modified: 2014-08-16 (土) 12:41:50 (2120d)

ActiveDesktop_01

デジタル時計を表示する

02_01.png

デジタル時計表示用スクリプトファイルの作成

手始めに、Active Desktop にデジタル時計を表示してみます。 JavaScript?のソースはこんな感じ。

clock.js

//時計を描画するHTMLエレメント
document.write("<DIV id=\"clock\"></DIV>\n");

function dateDigitTrim(intTmp){
	if(intTmp<10) return "0"+intTmp;
	return intTmp;
}

function displayClock(){
	var d = new Date();
	var strOut = "";
	strOut += d.getFullYear() + ".";
	strOut += dateDigitTrim(d.getMonth()+1) + ".";
	strOut += dateDigitTrim(d.getDate()) + " ";
	strOut += dateDigitTrim(d.getHours()) + ":";
	strOut += dateDigitTrim(d.getMinutes());
	
	document.getElementById("clock").innerHTML=strOut;
}

displayClock(); //時計を描画

setInterval(displayClock,20000); //時計描画をタイマー化

型の定義があいまいで申し訳ないですが、JavaScript?ならこの程度は問題なく動きます。 上記clock.jsをindex.htmlの下の include/ フォルダに入れておきます。

また、今回は時計を「分」までしか表示しないため、描画を20秒毎に行っています。 そのため、実際の時刻と最大20秒違って表示されることがあります。

追記:1秒間隔でタイマーをセットし、取得した現在の「分」の 値が変更されていれば描画、変更されていなければなにもしない…という動作をすれば時刻のズレはなくなります。サンプルはこちら→番外編01 大きなデジタル時計を表示する

JavaScript?で日時のフォーマットを整える際、JScriptにはロケールを参照して表示してくれる便利なメソッド toLocaleString?() があるのでこれを使っても良いでしょう。ただし激しく環境依存するため注意が必要です。toLocaleString?()を使う場合、上記のソースコードは実質5行ぐらいになっちゃいます。

toLocaleString?()の動作を確認するにはこんなブックマークレットを動かしてみると良いでしょう。

Javascript:alert(new Date().toLocaleString());void(0);

このコードをInternetExplorer?のアドレス欄にペーストしてみてください。

index.htmlの作成

index.htmlのBODY内で上記clock.jsファイルをインクルードします。

index.html

<HTML>
<HEAD>
<LINK rel="stylesheet" href="default.css" />
</HEAD>
<BODY>
<SCRIPT src="include/clock.js"></SCRIPT>
</BODY>
</HTML>

<META http-equiv="content-type" content="text/html; charset=Shift-JIS"> などは特に無くても問題ありませんでした。もし文字化けしてしまった場合は適宣入れてください。

<SCRIPT>のtype=やlanguage=も無くても問題無い様ですが、心配なら宣言してください。

スタイルシートファイルの作成

最後に、index.htmlと同フォルダにスタイルシートファイルdefault.cssを作っておきます。

default.css (一例)

BODY,DIV{
	margin:0;
	padding:0;
}

BODY{
	background:#777;
}

/*********************************************
clock
*********************************************/
#clock{
	position:absolute;
	top:20px;
	left:400px;
	border:1px solid #89a;
	padding:5px 20px;
	font-size:75%;
	color:#fff;
}

背景色、文字色や罫線色は好みで設定してください。 壁紙(BODYのbackground-image)は、次回の開発でランダム切り替え機能を作るため、今回は宣言していません。

#clockをposition:absolute;で絶対配置していますが、これはより配置の自由度を高めるためです。 ディスプレイの画面解像度は基本的に固定だと思いますので(頻繁に変える人はそんなにいない、という意味)、このようにブロック要素をピクセル単位で絶対配置していけばレイアウトも作りやすいはずです。

index.htmlをInternetExplorer?で表示してみて、現在時刻が表示され、しばらく待って時刻が更新され、またJavaScript?のエラーが表示されてなければOKです。

時計を表示するだけではものすごく寂しいですが、この状態でもActive Desktop として読み込むことは可能です。

応用

番外編01 大きなデジタル時計を表示する

ベッドサイドPCに最適な、全画面時計をActive Desktop にて実現させてみました。