So-net無料ブログ作成

リアルタイムで時間表示 [JavaScript]

時間をリアルタイムで表示する Javascript です。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで時間を表示</title>
<script type="text/javascript"><!--
function showTime(){
	var jikan = new Date();
	var nowHour = jikan.getHours();
	var nowMin = jikan.getMinutes();
	document.getElementById("rtClock").innerHTML = nowHour + "時" + nowMin + "分";
}
setInterval('showTime()',1000);
// --></script>
</head>

<body>
<div id="rtClock"></div>
</body></html>


時間と分を取得して、表示する文字列を作成し、id="rtClock" に表示します。
リアルタイムで表示を更新するために、setInterval() で1秒ごとに showTime() を実行しています。

JavaScript なので、ローカルのパソコンの時間設定を取得しています。
パソコンの時間設定が狂っていると、そのまま表示します。



時間表示のカスタマイズは、いろいろ考えられます。
このままだと動いているか分かりづらいので、秒を取得して、1秒ごとに点滅させることも考えられます。
表示桁数を2桁に固定して、1時5分 を 01時05分 してもいいかもしれません。
24時間表示ではなく、AM/PM 表示の方が見やすいという人もいると思います。
<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで時間を表示2</title>
<script type="text/javascript"><!--
// 桁数が1桁だったら先頭に0を加えて2桁にする
function set2figures(num){
	var ret;
	if(num<10){
		ret = "0" + num;
	}else{
		ret = num;
	}
	return ret;
}

// AM/PMと12時間表示
function setAMPM(hour){
	var ampm;
	var ret;
	if(hour < 12){
		ret = "AM " + set2figures(hour);
	}else{
		ret = "PM " + set2figures(hour-12);
	}
	return ret;
}

// 秒ごとに点滅
function setFlash(sec){
	var cnt = sec % 2;
	var ret;
	if(cnt != 0){		// 奇数
		ret = "+";
	}else{				// 偶数
		ret = "*";
	}
	return ret;
}

function showTime(){
	var jikan = new Date();
	var nowHour = setAMPM(jikan.getHours());
	var nowMin = set2figures(jikan.getMinutes());
	var nowsec = setFlash(jikan.getSeconds());
	document.getElementById("rtClock").innerHTML = nowsec + nowHour + ":" + nowMin;
}
setInterval('showTime()',1000);
// --></script>
</head>

<body>
<div id="rtClock"></div>
</body></html>


このサンプルはテキスト表示なので、数字の画像を作って、画像で表示すると時計らしくなります。
画像は、毎回読み込んでいるとアクセスに時間がかかるので、起動時にまとめて読み込むなどの工夫が必要になります。



nice!(3)  コメント(0) 
共通テーマ:パソコン・インターネット

nice! 3

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。