アナログ時計

画像を使ったアナログ時計試作品

画像は5枚。文字盤、短針、長針、秒針、カバーを順に重ね合わせ、3つの針を時刻に合わせて画像を回転させています。

時計のデザイン：Janusはrinkoroさん。金魚すくい、マンドラゴラ、ジャグナーははるぼう。

ソース

下記ソースは再利用していただいてかまいません。

HTML

<div id="clocks">
<img src="body.png" width="250" height="250" id="image_body" class="clock">
<img src="short.png" width="250" height="250" id="image_short" class="clock">
<img src="long.png" width="250" height="250" id="image_long" class="clock">
<img src="sec.png" width="250" height="250" id="image_sec" class="clock">
<img src="cover.png" width="250" height="250" id="image_cover" class="clock">
</div>

5つの画像に名前を付けて配置しています。
image_bodyの画像の大きさから中心を計算して回転させますので、画像は同じサイズのものを用意してください。
GIF形式またはPNG形式で作りますと背景を透明にすることが可能です。JPEG形式では透明になりません。

CSS

<style type="text/css">
.clock {
	position: absolute;
}
#clocks {
	display: block;
}
</style>

CSSを使って時計を表示する画像を重ねています。

JavaScript

<script type="text/javascript">
window.onload = function() {
	//時計の大きさを設定
	setWatchSize();
	//タイマー起動
	timerID = setInterval("moveTimer()",1000);
};

//時計の大きさを設定
function setWatchSize() {
	//ベース画像のサイズを取得
	var obj = document.getElementById("image_body");
	var clockW = obj.width;
	var clockH = obj.height;
	//ボックスのサイズを設定
	document.getElementById("clocks").style.width = clockW + "px";
	document.getElementById("clocks").style.height = clockH + "px";
}

//時計を動かす
function moveTimer() {
	var date,Hou,Min,Sec,hDeg,mDeg,sDeg;
	//日付
	date = new Date();
	//時間取得
	Hou = date.getHours();
	Min = date.getMinutes();
	Sec = date.getSeconds();
	//針の角度取得
	hDeg = (Hou % 12) * (360 / 12);
	mDeg = Min * (360 / 60);
	sDeg = Sec * (360 / 60);
	//角度微調整
	hDeg += (Min / 60) * (360 / 12);
	mDeg += (Sec / 60) * (360 / 60);
	
	//デジタル表示
	if (Hou < 10) Hou = "0" + Hou;
	if (Min < 10) Min = "0" + Min;
	if (Sec < 10) Sec = "0" + Sec;
	
	//短針の表示
	document.getElementById("image_short").style.transform = "rotate(" + hDeg + "deg)";
	document.getElementById("image_short").style.MozTransform = "rotate(" + hDeg + "deg)";
	document.getElementById("image_short").style.WebkitTransform = "rotate(" + hDeg + "deg)";
	document.getElementById("image_short").style.msTransform = "rotate(" + hDeg + "deg)";
	
	//長針の表示
	document.getElementById("image_long").style.transform = "rotate(" + mDeg + "deg)";
	document.getElementById("image_long").style.MozTransform = "rotate(" + mDeg + "deg)";
	document.getElementById("image_long").style.WebkitTransform = "rotate(" + mDeg + "deg)";
	document.getElementById("image_long").style.msTransform = "rotate(" + mDeg + "deg)";
 	
	//秒針の表示
	document.getElementById("image_sec").style.transform = "rotate(" + sDeg + "deg)";
	document.getElementById("image_sec").style.MozTransform = "rotate(" + sDeg + "deg)";
	document.getElementById("image_sec").style.WebkitTransform = "rotate(" + sDeg + "deg)";
	document.getElementById("image_sec").style.msTransform = "rotate(" + sDeg + "deg)";
}
</script>

1秒ごとに３つの針の角度を計算して、画像を回転させています。

戻る