jiichan.com

ET CETERA

アナログ時計を作ってみた

パソコン上でデジタルな時計を表示するのは簡単です。しかし、アナログ時計となると長針、短針、秒針と進めていく必要があるので工夫が必要です。
そこでこちらのサイトを参考？（殆どまる写し）に頭の体操も兼ねてアナログ時計を作ってみました。

アナログ時計の部品

画像は全部GIMPで作りました。やはりドロー系のInkscapeで作るべきでした。
部品の画像は重ねて使うため同じサイズで、さらに針の回転を考え中心を揃えて作成しました。

目盛盤：周りのグリーンの縁と目盛盤と二つのレイヤーに分けてます。目盛はコピペで増やしていきました。

時計の針：短針、長針、秒針、それぞれファイルが別です。動かすために当然ですが別に作りました。

アナログ時計の各コード

アナログ時計のスクリプト、CSSです。 

$(function(){
	// アナログ時計
	setInterval("moveTimer()", 1000);
});

// 時計の動き
function moveTimer(){
	//	日付取得
	var date = new Date();
	// 時間取得
	var Hou = date.getHours();
	var Min = date.getMinutes();
	var Sec = date.getSeconds();
	// 針の角度取得
	var hDeg = (Hou % 12) * (360 / 12);
	var mDeg = Min * (360 / 60);
	var sDeg = Sec * (360 / 60);
	// 短針と長針の角度調整（秒針が進むたびに短針も長針もそれにあわせ少しずつ進む）
	hDeg += (Min / 60) * (360 / 12);
	mDeg += (Sec / 60) * (360 / 60);
	
	// 短針表示
	document.getElementById("image_short").style.transform =
	"rotate(" + hDeg + "deg)";
	// 長針表示
	document.getElementById("image_long").style.transform =
	"rotate(" + mDeg + "deg)";
	// 秒針表示
	document.getElementById("image_sec").style.transform =
	"rotate(" + sDeg + "deg)";
}


#analogClock {
	position: relative;
	width: 150px;
	height: 150px;
}
.clock {
	position: absolute;
	top: 0;
	left: 0;
}